Estoy usando pestañas de Vuetify que funcionan muy bien, pero quiero agregar un submenú debajo de algunas de las pestañas. Esto es lo que tengo hasta ahora, pero no está resultando tan bueno como me gustaría:

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

Los resultados se ven así, que no se ve nada bien. ¿Algún consejo sobre cómo hacer que las subpestañas aparezcan debajo de su padre?

¿Quizás estoy usando el componente incorrecto aquí?