Menu recursivo em quasar (para drawer)

mainMenu.json

[
  {
    "name": "Instituições",
    "icon": "account_balance",
    "children": [
      {
        "name": "Instituições",
        "icon": "account_balance",
        "children": []
      }
    ]
  },
  {
    "name": "Instituições Parceiras",
    "icon": "card_travel",
    "children": []
  },
  {
    "name": "Secretaria",
    "icon": "assignment",
    "children": []
  },
  {
    "name": "Pedagógico",
    "icon": "local_library",
    "children": [
      {
        "name": "Instituições",
        "icon": "account_balance",
        "children": [
          {
            "name": "Instituições",
            "icon": "local_library",
            "children": []
          }
        ]
      },
      {
        "name": "Instituições",
        "icon": "account_balance",
        "children": []
      }
    ]
  },
  {
    "name": "Usuários",
    "icon": "account_box",
    "children": []
  }
]

MainMenu.vue

<template>
  <div>
    <q-collapsible v-if="item.children.length > 0" v-for="(item, index) in itens" :key="index" :icon="item.icon" indent :label="item.name"
                   :to="`/app/competitions/${item.id}`">
      <main-menu  :itens="item.children"/>
    </q-collapsible>
    <q-side-link :to="''" v-else >
      <q-item>
        <q-item-side :icon="item.icon"/>
        <q-item-main :label="item.name"/>
      </q-item>
    </q-side-link>
  </div>
</template>

<script>
  import {QCollapsible, QItem, QSideLink, QItemSide, QItemMain} from 'quasar'
  import mainMenu from './MainMenu'

  export default {
    components: {QCollapsible, QItemSide, QItem, QSideLink, QItemMain, mainMenu},
    props: ['itens'],
    name: 'mainMenu'
  }
</script>