如何向结构中添加子菜单，如描述中所示- Vue，Quasar

data() {
  return {
    menuItems: [
      {
        name: '菜单项1',
        children: [
          { name: '子菜单项1' },
          { name: '子菜单项2' },
          { name: '子菜单项3' }
        ]
      },
      {
        name: '菜单项2',
        children: [
          { name: '子菜单项4' },
          { name: '子菜单项5' }
        ]
      }
    ]
  }
}

<template>
  <div>
    <ul>
      <li v-for="menuItem in menuItems" :key="menuItem.name">
        {{ menuItem.name }}
        <ul v-if="menuItem.children">
          <li v-for="childMenu in menuItem.children" :key="childMenu.name">
            {{ childMenu.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

data() {
  return {
    menuItems: [
      {
        name: '菜单项1',
        children: [
          { name: '子菜单项1' },
          { name: '子菜单项2' },
          { name: '子菜单项3' }
        ]
      },
      {
        name: '菜单项2',
        children: [
          { name: '子菜单项4' },
          { name: '子菜单项5' }
        ]
      }
    ]
  }
}

<template>
  <div>
    <q-menu>
      <q-list>
        <q-item v-for="menuItem in menuItems" :key="menuItem.name">
          <q-item-section>{{ menuItem.name }}</q-item-section>
          <q-item-section side v-if="menuItem.children">
            <q-menu>
              <q-list>
                <q-item v-for="childMenu in menuItem.children" :key="childMenu.name">
                  <q-item-section>{{ childMenu.name }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </div>
</template>