Vue / Vuetify 3级嵌套列表

Question

我是Vuetify的新手，我正在尝试使用嵌套列表创建移动导航。我在此嵌套列表的第3层的孙子数据下拉菜单中遇到问题。在下面的代码中，下拉列表适用于子级数据，但对孙子代而言则没有下拉列表。我认为我没有正确嵌套，或者我的条件不正确。我查看了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>

下面是数据的结构

<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>