antdesign for vue 官网，版本3.2.0 menu组件最后一种实现的js版本，为何自定义的submenu不生效？

Question

从官网复制下来的代码，多级菜单都不显示，一级菜单显示正常

<template>
  <div style="width: 256px">
    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['2']"
        mode="inline"
        :inline-collapsed="collapsed"
    >
      <template v-for="item in list" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
<!--          <a-sub-menu :key="item.key">-->
<!--            <template #icon><MailOutlined /></template>-->
<!--          <template #title> {{ item.title }}</template>-->
<!--            <template v-for="child in item.children" :key="child.key">-->
<!--                <a-menu-item :key="child.key">-->
<!--                  <template #icon>-->
<!--                    <PieChartOutlined />-->
<!--                  </template>-->
<!--                  {{ child.title }}-->
<!--                </a-menu-item>-->
<!--            </template>-->
<!--          </a-sub-menu>-->
        </template>
      </template>
    </a-menu>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
} from '@ant-design/icons-vue';

// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js
const SubMenu = {
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  template: `
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `,
  components: {
    PieChartOutlined,
    MailOutlined,
  },
};
const list = [
  {
    key: '1',
    title: 'Option 1',
  },
  {
    key: '2',
    title: 'Navigation 2',
    children: [
      {
        key: '2.1',
        title: 'Navigation 3',
        children: [
          {
            key: '2.1.1',
            title: 'Option 2.1.1',
          },
        ],
      },
    ],
  },
];
export default defineComponent({
  setup() {
    const collapsed = ref(false);
    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      list,
      collapsed,
      toggleCollapsed,
    };
  },
  components: {
    'sub-menu': SubMenu,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
  },
});
</script>

但将自定义组件注释，换成自己写的二级菜单就可以正常显示

<template>
  <div style="width: 256px">
    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
      <MenuUnfoldOutlined v-if="collapsed"/>
      <MenuFoldOutlined v-else/>
    </a-button>
    <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['2']"
        mode="inline"
        :inline-collapsed="collapsed"
    >
      <template v-for="item in list" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined/>
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <!--          <sub-menu :menu-info="item" :key="item.key" />-->
          <a-sub-menu :key="item.key">
            <template #icon>
              <MailOutlined/>
            </template>
            <template #title> {{ item.title }}</template>
            <template v-for="child in item.children" :key="child.key">
              <a-menu-item :key="child.key">
                <template #icon>
                  <PieChartOutlined/>
                </template>
                {{ child.title }}
              </a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </div>
</template>
<script>
import {defineComponent, ref} from 'vue';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
} from '@ant-design/icons-vue';

// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js
const SubMenu = {
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  template: `
    <a-sub-menu :key="menuInfo.key">
    <template #icon>
      <MailOutlined/>
    </template>
    <template #title>{{ menuInfo.title }}</template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!item.children">
        <a-menu-item :key="item.key">
          <template #icon>
            <PieChartOutlined/>
          </template>
          {{ item.title }}
        </a-menu-item>
      </template>
      <template v-else>
        <sub-menu :menu-info="item" :key="item.key"/>
      </template>
    </template>
    </a-sub-menu>
  `,
  components: {
    PieChartOutlined,
    MailOutlined,
  },
};
const list = [
  {
    key: '1',
    title: 'Option 1',
  },
  {
    key: '2',
    title: 'Navigation 2',
    children: [
      {
        key: '2.1',
        title: 'Navigation 3',
        // children: [
        //   {
        //     key: '2.1.1',
        //     title: 'Option 2.1.1',
        //   },
        // ],
      },
    ],
  },
];
export default defineComponent({
  setup() {
    const collapsed = ref(false);
    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      list,
      collapsed,
      toggleCollapsed,
    };
  },
  components: {
    'sub-menu': SubMenu,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
  },
});
</script>