Vuetify tabs removing tab does not remove nested component

Question

When using Vuetify tabs, how do I remove a tab AND any components within that tab?

For example

• I dynamically add three tabs and each has a nested text area component
• I add some text in each tab's text area ("tab 0" for tab 0, "tab 1" for tab 1, etc).
• If I remove the tab at index 1, the text area that was displaying "tab 1" now shows up under tab 2

After removing Tab 1, Tab 2 displays Tab 1's text:

I can see that the text area component is just staying associated with the tab that is at index 1, but I can't figure out how to change this to act as I would expect. How can I remove both the nested text area component and the tab so the remaining ones stay together?

Here's the data & methods I'm using

data: () => ({
   selectedTab: "tab-0",
   tabCount: 0,
   tabs: [{ title: "Tab 0" }]
}),
methods: {
  addTab() {
    this.tabCount++;
    let newTabIndex = this.tabs.length;
    let title = "Tab " + this.tabCount;
    this.tabs.push({ title: title });
    this.$nextTick(() => {
      this.selectedTab = "tab-" + newTabIndex;
    });
  },
  removeTab(index) {
    this.tabs.splice(index, 1);
    if (!this.tabs.length) this.addTab();
  },
},

And the template:

 <template>
   <div class="ma-5">
      <v-tabs centered dense v-model="selectedTab" show-arrows>
        <v-tab v-for="(t, index) in tabs" :key="index" :href="'#tab-' + index">
          {{ t.title }}

          <v-btn icon @click="removeTab(index)" class="ml-2"
            ><v-icon x-small>mdi-close</v-icon></v-btn
          >
        </v-tab>
      </v-tabs>

      <v-tabs-items v-model="selectedTab" class="pt-2">
        <v-tab-item
          transition="fade-transition"
          reverse-transition="fade-transition"
          v-for="(t, index) in tabs"
          :key="index"
          :value="'tab-' + index"
        >
          <v-textarea outlined class="mx-auto"></v-textarea>
        </v-tab-item>
      </v-tabs-items>
    </div>
</template>

Answer 1

That is because you are using "index" as key for the tabs:

    <v-tab v-for="(t, index) in tabs" :key="index" :href="'#tab-' + index">
    

You need to use something more unique. I'd suggest, in your example, to use the tab's title:

    <v-tab v-for="(t, index) in tabs" :key="t.title" :href="'#tab-' + index">
    

You need to change also the line that creates the actual content:

        <v-tab-item
          transition="fade-transition"
          reverse-transition="fade-transition"
          v-for="(t, index) in tabs"
          :key="t.title"
          :value="'tab-' + index"
        >