Move component visibility validation to parent component

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>

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>