Vue.js Vue/Vuetify 3级嵌套列表

我是Vuetify新手，我正在尝试使用嵌套列表创建移动导航。我对位于嵌套列表第三级的孙子数据下拉列表有问题。对于下面的代码，下拉列表适用于子数据，但不会显示用于子数据的下拉列表。我相信我没有正确的筑巢，或者我的条件是不正确的。我查看了Vuetify文档，但无法理解这一点

  <v-app>
    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    <v-navigation-drawer
      v-model="drawer"
      app
      width="320px"
      style="margin-top: 70px; background-color: #255e35"
      class="text--white"
    >
      <v-list style="transform: translateX(0px)">
        <div id="app">
          <v-app>
            <v-app-bar-nav-icon
              @click.stop="drawer = !drawer"
            ></v-app-bar-nav-icon>
            <v-navigation-drawer
              v-model="drawer"
              app
              width="320px"
              style="margin-top: 70px; background-color: #255e35"
              class="text--white"
            >
              <v-list style="transform: translateX(0px)" class="top-level-list">
                <template v-for="(link, i) in links">
                  <v-list-item v-if="!link.children" :key="i">
                    <v-list-item-title>{{ link.text }}</v-list-item-title>
                  </v-list-item>

                  <v-list-group v-else-if="link.children" :key="i"
                    ><!--FIRST DROPDOWN-->
                    <template v-slot:activator>
                      <v-list-item-title>{{ link.text }}</v-list-item-title>
                    </template>

                    <template v-for="(child, j) in link.children">
                      <v-list-item v-if="!child.children" :key="j">
                        <v-list-item-title>{{ child.text }}</v-list-item-title>
                      </v-list-item>
                      <!--END OF FIRST SUBMENU-->

                      <v-list-group sub-group v-else :key="j">
                            <template v-slot:activator>
                                 <v-list-item-title>{{ child.text }}</v-list-item-title>
                            </template>

                            <template  v-for="(grandchild, k) in child.grandchildren">
                                <v-list-item v-if="!grandchild.grandchildren" :key="k">
                                     <v-list-item-title>{{
                                      grandchild.text
                                      }}</v-list-item-title>
                                </v-list-item>
                            </template>

                     </v-list-group> 
                    </template>
                  </v-list-group>
                </template>
              </v-list>
            </v-navigation-drawer>
          </v-app>
        </div>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

{{link.text}
{{link.text}
{{child.text}
{{child.text}
{{
孙子文本
}}

下面是数据的结构

<script>
export default {
  name: "App",
  data() {
    return {
      drawer: false,
      links: [
        {
          to: "/",
          text: "Home",
          active: false,
          children: [
            {
              text: "Swag",
              to: "/swag",
              target: "_blank",
              active: false,
            },
            {
              text: "About Us",
              to: "/about",
              active: false,
            },
            {
              text: "Contact - General Inquiries",
              to: "/contact-general",
              active: false,
            },
            {
              text: "Contact - Advertising Inquiries",
              to: "/contact-ad",
              active: false,
            },
            {
              text: "Submit An Article",
              to: "/submit-article",
              active: false,
            },
          ],
        },
        {
          to: "/events",
          text: "Events",
          active: false,
          children: [
            {
              text: "Hunters Event",
              to: "",
              grandchildren: [      <----------GRANDCHILDREN------>
                {
                  text: "Hunters",
                  to: "/events/view/hunters",
                  active: false,
                },
                {
                  text: "Exhibitor Information",
                  to: "/events/view/exhibitor",
                  active: false,
                },
                {
                  text: "3D Archery Tournament",
                  to: "/events/view/3d-archery",
                  active: false,
                },
              ],
            },
          ],
        },
        {
          to: "/marketplace",
          text: "Marketplace",
          active: false,
          children: [
            {
              text: "Land And Lease",
              to: "/marketplace/category/land-and-lease",
              active: false,
            },
            {
              text: "Outdoor Gear",
              to: "/marketplace/category/outdoor-gear",
              active: false,
            },
            {
              text: "Employment",
              to: "/marketplace/category/employment",
              active: false,
            },
          ],
        },
      ],
    };
  },
};
</script>

导出默认值{
名称：“应用程序”，
数据（）{
返回{
出票人：错，
链接：[
{
至：“/”，
文字：“主页”，
活动：错误，
儿童：[
{
文字：“Swag”，
致：“/swag”，
目标：“_blank”，
活动：错误，
},
{
文字：“关于我们”，
致：“/关于”，
活动：错误，
},
{
文本：“联系人-一般查询”，
致：“/联系将军”，
活动：错误，
},
{
文本：“联系人-广告查询”，
致：“/联系广告”，
活动：错误，
},
{
文字：“提交一篇文章”，
至：“/提交文章”，
活动：错误，
},
],
},
{
至：“/events”，
文本：“事件”，
活动：错误，
儿童：[
{
文字：“猎人事件”，
至：“，
孙辈：[
{
文字：“猎人”，
至：“/events/view/hunters”，
活动：错误，
},
{
文本：“参展商信息”，
致：“/活动/视图/参展商”，
活动：错误，
},
{
文字：“3D射箭比赛”，
发送至：“/events/view/3d archery”，
活动：错误，
},
],
},
],
},
{
致：“/marketplace”，
文本：“市场”，
活动：错误，
儿童：[
{
正文：“土地和租赁”，
致：“/市场/类别/土地和租赁”，
活动：错误，
},
{
文字：“户外装备”，
至：“/市场/类别/户外装备”，
活动：错误，
},
{
正文：“就业”，
致：“/市场/类别/就业”，
活动：错误，
},
],
},
],
};
},
};