Dynamically add or remove Tab component，may cause compoment's selected status abnormally

[mahiru-forever]

Whatever i use the selected(Tabs component's props) or not, it always operation abnormally.I saw the code, Tabs Component's tabs variable seem only perceive the newly added Tab component, but when delete, tabs is no change. I'm not sure it's my code wrong or not used correctly.
Look forward to your answer.

// tabs component template
<Tabs>
  {#each tabs as { label, key }}
  <Tab>
     {label}
       <span class="del-tab" on:click|preventDefault|stopPropagation={() => delMehod(key)}>x</span>
  </Tab>
  {/each}
  <div class="tab-add" on:click={addMethod}>+</div>
</Tabs>

// dynamically remove
function delMehod(key) {
  tabs = tabs.filter(v => {
    return v.key !== el.detail
  })
}

// dynamically add
function addMethod() {
  tabs = [...tabs, { label:'xxx', key: 'xxx' }]
}

[metonym]

Duplicate of #368

Tabs uses component composition and relies on the index for ordering. If removed or re-ordered, the index is lost.

The workaround is to use the #key block to re-create the component any time tabs changes:

{#key tabs}
  <Tabs>
     {#each tabs as tab}
       ...
     {/each}
  </Tabs>
{/key

[thangvd2312]

when i use {#key} it will re-render the components in the content of tabs, i don't want that to happen, is there any way to fix that, thanks