v-bind doesn't work with v-tabs I had to use v-model

Question

I'm using the component of vuetify, and have set the default display as page-2 (students) but when I click on second tab professors (page1) nothing happens.

when I changed :value with v-model it works.

I don't understand why it is working with two way binding and not the case with one way binding

AFAIK v-model works with input elements (form) and to get values in both direction: template/script & script/template, am I wrong ?

    <v-tabs :value="tab">
      <v-tab href="#page-2" >
        {{ 'students' }}
      </v-tab>
      <v-tab href="#page-1">
        {{ 'professors' }}
      </v-tab>

actual display

Answer 1

According to vuetify 3 documentation, you sould use model-value (see: https://vuetifyjs.com/en/api/v-tabs/#props-model-value)

update your code like this and it should works :

<v-tabs :model-value="tab">
  <v-tab href="#page-2" >
    {{ 'students' }}
  </v-tab>
  <v-tab href="#page-1">
    {{ 'professors' }}
  </v-tab>
</v-tabs>