Hide tab headers in vuetify - vue.js

Question

I'm using #nuxtjs/vuetify with nuxt.js as combo.
I'm using the component v-tabs with v-tabs-items in my page used as grouped settings.
What i want to achieve is simple but i couldn't find the solution.
if there is just one group of settings. i don't want to show the tab header.
if there are multiple groups of settings. then the tab headers may show.
so what the code is now:
<v-tabs v-model="tab"> <!-- GROUPED SETTINGS ORDERED IN TABS -->
<v-tab class="mx-4" v-for="(tab, index) in Object.keys(content_fields)" :key="index">{{ tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item>
<!-- item -->
</v-tab-item>
</v-tabs-items>
i tried to do a v-if on the v-tabs. so if there is just one group the v-tabs will not show.
but then the v-tabs-items will not show at all. even if i set the tab property on the good tab.
is there any solution that will give the result that i want?

Answer 1

I did with v-show:
HTML:
<div id="app">
<v-app id="inspire">
<v-tabs>
<v-tab v-show="tabs.length > 1" v-for="i in tabs" :key="i.name" :href="`#tab-${i.name}`"> {{ i.text }} </v-tab>
<v-tab-item v-for="i in tabs" :key="i.name" :value="'tab-' + i.name">
<v-card flat tile>
<v-card-text>{{ i.text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
tabs: [
{ name: 1, text: 'One' },
//{ name: 2, text: 'Two' }
]
}
}
})
Here you can see the live demo: https://codepen.io/ljcordero/pen/wvBXqWv
Hope this help.