Vuetify tabs with components - mounted called twice on components - vue.js

Question

I have a set of vuetify tabs where the content of each tab is conditionally rendered. This works as expected when the first tab is opened. When a second tab or beyond is opened, mounted is fired twice on the component inside that tab.
Here's how the tabs are structured:
<v-tabs
dark
background-color="blue-grey darken-4"
show-arrows
height="30"
v-model="name"
v-if="openTabs.length"
>
<v-tabs-slider color="accent"></v-tabs-slider>
<v-tab
v-for="item in openTabs"
:key="item.name"
v-model="activeTab"
class="pr-0 white--text"
color="accent"
active-class=""
#click="setActiveTab(item)"
>
<template class="white--text text-capitalize">
<v-icon>
{{ item.icon }}
</v-icon>
{{ item.name }}
<div v-if="item.changes">*</div>
<v-btn plain width="10" class="px-0" #click="closeTab(item.id)">
<v-icon
dark
small
width="10"
>mdi-close</v-icon>
</v-btn>
</template>
</v-tab>
</v-tabs>
<v-tabs-items v-model="name">
<v-tab-item
v-for="item in openTabs"
:key="item.name"
style="height: 100%"
:transition="false"
>
<BlockForm v-if="activeType === 'blocks'" v-bind:name="activeTab" v-bind:activeProject="activeProject" />
<BiomeForm v-if="activeType === 'biomes'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
<ItemForm v-if="activeType === 'items'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
<RecipeForm v-if="activeType === 'recipes'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
</v-tab-item>
</v-tabs-items>
Here's what happens in setActiveTab:
setActiveTab: function (item) {
this.activeTab = item.name;
this.activeType = item.type;
}
BlockForm, ItemForm, BiomeForm, and RecipeForm are the components where mounted fires twice if they are the second (or third etc) tab opened. I'm not sure if this has something to do with the way I'm using v-if.

Answer 1

Hey mate have the same issue. I found explanation and as result code it.
It works properly. Try it.
<template>
<v-tabs centered="centered" grow v-model="activeTab">
<v-tab
v-for="tab of tabs"
:key="tab.id"
:id="tab.id"
:to="tab.route" exact>
{{ tab.title }}
</v-tab>
<v-tabs-items
v-model="activeTab"
#change="updateRouter($event)">
<v-tab-item
v-for="tab of tabs"
:key="tab.id"
:value="tab.route"
class="tab_content">
<router-view
v-if="tab.route === $route.fullPath && tab.route === activeTab">
</router-view>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</template>
Here script data.
data() {
return {
activeTab: '',
tabs: [
{id: 1, title: 'Business', route: '/business'},
{id: 2, title: 'System', route: '/system'},
]
};
},
methods: {
updateRouter(tab) {
this.$router.push(tab)
},
}
And router
children: [
{
path: '/business',
name: 'business',
component: () => import(
/* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardBusinessTab'
),
meta: {
permission: null,
},
},
{
path: 'system',
name: 'system',
component: () => import(
/* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardSystemTab'
),
meta: {
permission: null,
},
},
],
This was key for solution
v-if="tab.route === $route.fullPath && tab.route === activeTab">