title: Vuetify tabs removing tab does not remove nested component
body: <p>When using Vuetify tabs, how do I remove a tab AND any components within that tab?</p>
  <p>For example</p>
  <ul>
  <li>I dynamically add three tabs and each has a nested text area component</li>
  <li>I add some text in each tab's text area (&quot;tab 0&quot; for tab 0, &quot;tab 1&quot; for tab 1, etc).</li>
  <li>If I remove the tab at index 1, the text area that was displaying &quot;tab 1&quot; now shows up under tab 2</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/JxErf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JxErf.png" alt="Tab 1 1 tab and text" /></a></p>
  <p><a href="https://i.stack.imgur.com/SdUD0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SdUD0.png" alt="Tab 2 tab and text" /></a></p>
  <p>After removing Tab 1, Tab 2 displays Tab 1's text:</p>
  <p><a href="https://i.stack.imgur.com/mNrBD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mNrBD.png" alt="Tab 2 text after tab 1 is removed" /></a></p>
  <p>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?</p>
  <p>Here's the data &amp; methods I'm using</p>
  <pre><code>data: () =&gt; ({
     selectedTab: &quot;tab-0&quot;,
     tabCount: 0,
     tabs: [{ title: &quot;Tab 0&quot; }]
  }),
  methods: {
    addTab() {
      this.tabCount++;
      let newTabIndex = this.tabs.length;
      let title = &quot;Tab &quot; + this.tabCount;
      this.tabs.push({ title: title });
      this.$nextTick(() =&gt; {
        this.selectedTab = &quot;tab-&quot; + newTabIndex;
      });
    },
    removeTab(index) {
      this.tabs.splice(index, 1);
      if (!this.tabs.length) this.addTab();
    },
  },
  </code></pre>
  <p>And the template:</p>
  <pre><code> &lt;template&gt;
     &lt;div class=&quot;ma-5&quot;&gt;
        &lt;v-tabs centered dense v-model=&quot;selectedTab&quot; show-arrows&gt;
          &lt;v-tab v-for=&quot;(t, index) in tabs&quot; :key=&quot;index&quot; :href=&quot;'#tab-' + index&quot;&gt;
            {{ t.title }}
  
            &lt;v-btn icon @click=&quot;removeTab(index)&quot; class=&quot;ml-2&quot;
              &gt;&lt;v-icon x-small&gt;mdi-close&lt;/v-icon&gt;&lt;/v-btn
            &gt;
          &lt;/v-tab&gt;
        &lt;/v-tabs&gt;
  
        &lt;v-tabs-items v-model=&quot;selectedTab&quot; class=&quot;pt-2&quot;&gt;
          &lt;v-tab-item
            transition=&quot;fade-transition&quot;
            reverse-transition=&quot;fade-transition&quot;
            v-for=&quot;(t, index) in tabs&quot;
            :key=&quot;index&quot;
            :value=&quot;'tab-' + index&quot;
          &gt;
            &lt;v-textarea outlined class=&quot;mx-auto&quot;&gt;&lt;/v-textarea&gt;
          &lt;/v-tab-item&gt;
        &lt;/v-tabs-items&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>