VaTabs: adding/removing tabs breaks slider and selection

[asvae]

Vuestic-ui version: 1.8.4

Steps to reproduce

Delete or add tab

What is the expected behavior?

Slider should stay in all cases and be bound to value

What is the current behavior?

On delete slider disappears completely (you have to refresh the page for it to appear)

On create slider disappears, but appears on tab click

Other information

Original post

Hello everyone, I have a problem with the Tabs component. I have the following code:

<template #tabs>
<va-tab v-for="channel in channels" :key="channel.title" :name="channel.title" @click="changeTab(tabIndex)">
{{ channel.title }}

I cann add channels programatically and want to set the newly added channel as active which looks like is working but I don't see the Tab as active and also there is no slider any more. My function to add a channel looks like this:
function addChannel() {
const newChannel = {
title: channelName.value,
}
channels.value.push(newChannel)
tabIndex.value = channels.value[channels.value.length - 1].title
channelName.value = null
}

Can someone help me? If you need more info just let me know.
The same with deleting a channel:
function deleteChannel() {
tabIndex.value = channels.value[channels.value.length-2].title
channels.value.splice(currentIndex.value, 1)
}

Example story

```ts import { defineComponent } from 'vue' import { VaTabs, VaTab } from './' import VaTabsDemo from './VaTabs.demo.vue'

export default {
title: 'VaTabs',
component: VaTabs,
tags: ['autodocs'],
}

export const OldDemos = () => defineComponent({
components: { VaTabsDemo },
template: '',
})

export const Default = () => defineComponent({
components: {
VaTabs, VaTab,
},
data () {
return {
tabName: 0,
channels: [
{ title: 'One' },
{ title: 'Two' },
{ title: 'Three' },
{ title: 'Four' },
],
}
},
methods: {
addChannel () {
const newChannel = {
title: 'some_' + new Date(),
}
this.channels.push(newChannel)
this.tabName = this.channels[this.channels.length - 1].title
},
changeTab () {

},
remove(channel) {
  console.log('delete')
  this.channels = this.channels.filter(c => c !== channel)
}

},
template: '\n' +
' <template #tabs>\n' +
' <va-tab\n' +
'v-for="channel in channels"\n' +
' :key="channel.title"\n' +
':name="channel.title"\n' +
'@click="changeTab(tabName)"\n' +
' >\n' +
' {{ channel.title }}  <button @click="remove(channel)">X\n ' +
'\n' +
'\n' +
'' +
`<button @click="addChannel()">add channel

tabName: {{tabName}}

channels: {{channels}}

`, }) ```