based on user selection change the tab index not working

[harifiresky]

i am trying to change the tab index based on user selection. i used the below code

this.$refs.lWizard.startIndex = 2;

but no reflection, Any Idea?

my code is :

<form-wizard class="pl-0 pr-0" ref="lWizard" color="rgba(var(--vs-primary), 1)" title="null" subtitle="null"
@on-complete="onComplete" back-button-text="Go back!" next-button-text="Go next!" finish-button-text="Complete"

      <tab-content class=" " v-for="(tab,index) in list"  :key="tab.id">                
       {{tab.title}}

<vs-button class=" " size="large" @click="test();">choose tab

  </form-wizard>

methods: { onComplete: function(){ alert('Yay. Done!'); }, test: function(){ alert('Yay. !'); this.$refs.lWizard.startIndex = 2; }, }