如何在vue中循环和创建具有多个子菜单级别的菜单

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <menu-item :subMenu="item.children" v-if="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Menu',
  props: ['menuData'],
  components: {
    MenuItem: {
      props: ['subMenu'],
      template: `
        <ul>
          <li v-for="item in subMenu" :key="item.id">
            {{ item.name }}
            <menu-item :subMenu="item.children" v-if="item.children" />
          </li>
        </ul>
      `
    }
  }
};
</script>

<template>
  <div>
    <menu :menuData="menuItems" />
  </div>
</template>

<script>
import Menu from './Menu.vue';

export default {
  name: 'App',
  components: {
    Menu
  },
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: '菜单项1',
          children: [
            { id: 11, name: '子菜单项1' },
            { id: 12, name: '子菜单项2', children: [
              { id: 121, name: '子子菜单项1' },
              { id: 122, name: '子子菜单项2' }
            ]}
          ]
        },
        {
          id: 2,
          name: '菜单项2',
          children: [
            { id: 21, name: '子菜单项3' },
            { id: 22, name: '子菜单项4' }
          ]
        }
      ]
    };
  }
};
</script>