Children inside a Children

Question

Is it possible to create a Children inside a Children? I’ve tried it this way but I don’t know how to do it.

export default {
    data: () => ({
      dialog: false,
      drawer: null,
      items: [
        {
          icon: 'keyboard_arrow_up',
          'icon-alt': 'keyboard_arrow_down',
          text: 'Componentes de UI',
          model: true,
          children: [
            { text: 'API explorer' },
            { text: 'Alerts' },
            { text: 'Avatars' },
            { text: 'Badges' },
            { text: 'Bottom navigation' },
            { text: 'Bottom sheets' },
            { text: 'Breadcrumbs' },
            { text: 'Buttons' },
            { text: 'Buttons: floating action buttons' },
            { text: 'Calendars' },
            { text: 'Cards' },
            { text: 'Carousels' },
            { text: 'Chips' },
            { text: 'Data interator' },
            { text: 'Data table' },
            { text: 'Dialogs' },
            { text: 'Dividers' },
            { text: 'Expansion panels' },
            { text: 'Footer' },
            { text: 'Groups', model: false, grandchildren: [ { text: 'Buttons groups', text: 'Item group', text: 'Windows' } ]},
            { text: 'Hover' },
            { text: 'Icons' },
            { text: 'Images' },
            { text: 'Inputs & controls', model: false, grandchildren: [ { text: 'Autocompletes', text: 'Combobox', text: 'Forms', text: 'Inputs', text: 'Overflow buttons', text: 'Selects', text: 'Selection controls', text: 'Sliders', text: 'Textareas', text: 'Text Fields' } ]},
            { text: 'Jumbotrons' },
            { text: 'Lists' },
            { text: 'Menus' },
            { text: 'Navigation drawers' },
            { text: 'Paginations' },
            { text: 'Parallax' },
            { text: 'Pickers', model: false, grandchildren: [ { text: 'Date pickers', text: 'Time pickers' } ] },
            { text: 'Progress' },
            { text: 'Ratings' },
            { text: 'Sheets' },
            { text: 'Snackbars' },
            { text: 'Sparklines' },
            { text: 'Steppers' },
            { text: 'Subheaders' },
            { text: 'Tabs' },
            { text: 'Timelines' },
            { text: 'Toolbar' },
            { text: 'Tooltips' },
            { text: 'Treeview' }

          ]
        },
        { icon: 'settings', text: 'Settings' },
        { icon: 'chat_bubble', text: 'Send feedback' },
        { icon: 'help', text: 'Help' },
        { icon: 'phonelink', text: 'App downloads' },
        { icon: 'keyboard', text: 'Go to the old version' },
        
      ],
      versions: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' }
      ]
    }),
    props: {
      source: String
    }
  }

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      :clipped="$vuetify.breakpoint.lgAndUp"
      fixed
      app
    >
      <v-list dense>
        <template v-for="item in items">
          <v-layout
            v-if="item.heading"
            :key="item.heading"
            row
            align-center
          >
            <v-flex xs6>
              <v-subheader v-if="item.heading">
                {{ item.heading }}
              </v-subheader>
            </v-flex>
            <v-flex xs6 class="text-xs-center">
              <a href="#!" class="body-2 black--text">EDIT</a>
            </v-flex>
          </v-layout>
          <v-list-group
            v-else-if="item.children"
            :key="item.text"
            v-model="item.model"
            :prepend-icon="item.model ? item.icon : item['icon-alt']"
            append-icon=""
          >
            <template v-slot:activator>
              <v-list-tile>
                <v-list-tile-content>
                  <v-list-tile-title>
                    {{ item.text }}
                  </v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </template>
            <v-list-tile
              v-for="(child, i) in item.children"
              :key="i"
            >
              <v-list-tile-action v-if="child.icon">
                <v-icon>{{ child.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ child.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile
              v-for="(grandchild, i) in item.grandchildren"
              :key="i"
            >
              <v-list-tile-action v-if="grandchild.icon">
                <v-icon>{{ grandchild.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ grandchild.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list-group>
          <v-list-tile v-else :key="item.text" @click="">
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      color="blue darken-3"
      dark
      app
      fixed
    >
    <v-btn icon large>
        <v-avatar size="39px" tile>
          <img
            src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
            alt="Vuetify"
          >
        </v-avatar>
      </v-btn>
    
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">        
        <span class="hidden-sm-and-down">Vuetify PT-BR</span>
      </v-toolbar-title>
      
      <v-spacer></v-spacer>
      
      
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-tooltip right>
            <template v-slot:activator="{ on }">
              <v-btn :href="source" icon large target="_blank" v-on="on">
                <v-icon large>code</v-icon>
              </v-btn>
            </template>
            <span>Source</span>
          </v-tooltip>
          <v-tooltip right>
            <template v-slot:activator="{ on }">
              <v-btn icon large href="https://codepen.io/johnjleider/pen/EQOYVV" target="_blank" v-on="on">
                <v-icon large>mdi-codepen</v-icon>
              </v-btn>
            </template>
            <span>Codepen</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-btn
      fab
      bottom
      right
      color="pink"
      dark
      fixed
      @click="dialog = !dialog"
    >
      <v-icon>add</v-icon>
    </v-btn>
    <v-dialog v-model="dialog" width="800px">
      <v-card>
        <v-card-title
          class="grey lighten-4 py-4 title"
        >
          Create contact
        </v-card-title>
        <v-container grid-list-sm class="pa-4">
          <v-layout row wrap>
            <v-flex xs12 align-center justify-space-between>
              <v-layout align-center>
                <v-avatar size="40px" class="mr-3">
                  <img
                    src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
                    alt=""
                  >
                </v-avatar>
                <v-text-field
                  placeholder="Name"
                ></v-text-field>
              </v-layout>
            </v-flex>
            <v-flex xs6>
              <v-text-field
                prepend-icon="business"
                placeholder="Company"
              ></v-text-field>
            </v-flex>
            <v-flex xs6>
              <v-text-field
                placeholder="Job title"
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-text-field
                prepend-icon="mail"
                placeholder="Email"
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-text-field
                type="tel"
                prepend-icon="phone"
                placeholder="(000) 000 - 0000"
                mask="phone"
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-text-field
                prepend-icon="notes"
                placeholder="Notes"
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-container>
        <v-card-actions>
          <v-btn flat color="primary">More</v-btn>
          <v-spacer></v-spacer>
          <v-btn flat color="primary" @click="dialog = false">Cancel</v-btn>
          <v-btn flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>