Vuetify tabs won't change when changing v-model - vue.js

Question

I am currently trying to make the active tab change when I put a value in a variable which controls the component, but it doesn't work. I am binding a variable to v-model and then changing that variable with the value I want. The point is, wheter the value is a number or a string, it doesn't matter because the tabs won't work.
<v-card flat>
<v-tabs v-model="tab" fixed-tabs>
<v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" #click="callChildrenToUpdate(idx)">
<v-badge color="red" size="18" class="p-2" v-if="instance"></v-badge>
...
</v-tab>
</v-tabs>
...
</v-card>
The data:
data () {
return {
tab: null,
items: [],
tabData: this.tabsData
}
},
And then in the mounted hook I try changing it, but it won't work.
this.tab = 87

Answer 1

On this situation, do NOT use template strings when setting the tab key.
So to make it work, change this:
<v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" #click="callChildrenToUpdate(idx)">
To:
<v-tab v-for="(instance, idx) in tabData" :key="idx" #click="callChildrenToUpdate(idx)">
Now when you do:
this.tab = 87
You should get your tabs to go to index 87 (which seems a lot).
If this is actually an ID, you could do a logic like:
this.tab = this.tabData.findIndex(i => i.id === 87)