Vuetify Tabs adding Sub Tabs

Question

I am using Vuetify tabs that work great, but I want to add a sub menu under some of the tabs. This is what I have so far but its not turning out as nice as I'd like:

<template>
  <v-container
    v-if="userLoaded"
    fluid
  >
    <v-tabs vertical>
      <v-tab
        v-for="tab in tabs"
        :key="tab.title"
      >
        {{ tab.title }}
        <v-row v-if="tab.subtabs && tab.subtabs.length">
          <v-tabs vertical>
            <v-tab
              v-for="(subtab, index) in tab.subtabs"
              :key="index"
            >
              {{ subtab.title }}
            </v-tab>
          </v-tabs>
        </v-row>
      </v-tab>

      <v-tab-item>
        <profile @updateloader="updateLoader" />
      </v-tab-item>
      <v-tab-item>
        <finance
          :user="user"
          :loading="loading"
          @updateloader="updateLoader"
        />
      </v-tab-item>
      <v-tab-item>
        <h1>Inventory goes here</h1>
      </v-tab-item>
      <v-tab-item>
        <notifications />
      </v-tab-item>
      <v-tab-item>
        <workgroup />
      </v-tab-item>
    </v-tabs>
  </v-container>
</template>

<script>
import Profile from './children/profile.vue';
import Finance from './children/finance.vue';
import Notifications from './children/notifications.vue';
import Workgroup from './children/workgroup.vue';

export default {
    name: 'Settings',
    components: { Profile, Finance, Notifications, Workgroup },
    data() {
        return {
            tabs: [{ title: 'Profile', subtabs: [{ title: 'one' }, { title: 'two' }] }, { title: 'Finance' }, { title: 'Inventory' }, { title: 'Notifications' }, { title: 'WorkGroup' }],
...//
</script>

The results look like this, which doesn't look good at all. Any tips on how to make the sub tabs appear underneath its parent?

Perhaps I am using the wrong component here?

Answer 1

use sub tabs in tabs item like this :

     <v-tabs>
                    <v-tab>
                        tab
                    </v-tab>
                    <v-tab>
                        tab
                    </v-tab>
                    <v-tab-item>
<!-- ##first tab contains other tab-menu -->
                        <v-tabs>
                            <v-tab>
                                sub-tab
                            </v-tab>
                            <v-tab>
                                sub-tab
                            </v-tab>
                            <v-tab-item>
                                sub tab content
                            </v-tab-item>
                            <v-tab-item>
                                sub tab content 
                            </v-tab-item>
                        </v-tabs>
                    </v-tab-item>
                    <v-tab-item>
<!-- ##Sec tab content -->
                    </v-tab-item>

     </v-tabs>