diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index b99186a005efc79ff35946712a62a9cb9536c998..dcf6f10e1ca91ba2bb9f61a22cd7981e4dae2c15 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -10,16 +10,11 @@ export default {
       required: false,
     },
   },
-  computed: {
-    hasGroups() {
-      return Object.keys(this.groups).length > 0;
-    },
-  },
 };
 </script>
 
 <template>
-  <ul class="content-list group-list-tree" v-show="hasGroups">
+  <ul class="content-list group-list-tree">
     <group-item v-for="(group, index) in groups" :key="index" :group="group" :baseGroup="baseGroup" />
   </ul>
 </template>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 6fcc016110f346e5e2593ee5fae0876df3cde7b4..11b66610e29c030cfc7e4e3530a923ece5e6e757 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -87,6 +87,9 @@ export default {
 
       return fullPath;
     },
+    hasGroups() {
+      return Object.keys(this.group.subGroups).length > 0;
+    },
   },
 };
 </script>
@@ -161,6 +164,6 @@ export default {
       {{group.description}}
     </div>
 
-    <group-folder v-if="group.isOpen" :groups="group.subGroups" :baseGroup="group" />
+    <group-folder v-if="group.isOpen && hasGroups" :groups="group.subGroups" :baseGroup="group" />
   </li>
 </template>