Vue / Vuetify 3 level nested lists - vue.js

Question

I'm new to Vuetify and I am trying to create a mobile navigation using nested lists. I am having an issue with the dropdown for the grandchildren data which is at the 3rd level of this nested list. With the code below the dropdown works for the children data but no dropdown appears for the grandchildren. I believe I am not nesting properly or my conditional isn't right. I reviewed Vuetify documentation and just couldn't figure this out.
<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>
Below is how the data is structured
<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>