Vuetify tabs removing tab does not remove nested component

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

https://stackoverflow.com/questions/66521200/vuetify-tabs-removing-tab-does-not-remove-nested-component March 08, 2021 at 04:41AM