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;
},
}