Vuetify tab content not changing when i select a new tab

Question

I have this simple app, which uses the Vuetify tab component to show tabs. But it does not work. I can't imagine what might be wrong. The first tab shows but when i click on a new tab it hides the original content but no new content is shown. I get no errors in console.

const {createApp, ref} = Vue;
const {createVuetify} = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    selectedtab: 'one'
  })
});

app.use(vuetify).mount('#app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<div id="app">
  <v-card>
    <v-tabs v-model="selectedtab">
      <v-tab value="one">Tab One</v-tab>
      <v-tab value="two">Tab Two</v-tab>
    </v-tabs>

    <v-card-text>
      <v-window v-model="selectedtab">
        <v-window-item value="one">
          Tab One content
        </v-window-item>

        <v-window-item value="two">
          Tab Two content
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</div>

I tried everything and i hope someone sees what is wrong in this code.

Answer 1

I think it's just a Vue / Vuetify version issue, I have updated vuetify / vue scripts to latest version and you're code works :

const {createApp, ref} = Vue;
const {createVuetify} = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    selectedtab: 'one'
  })
});

app.use(vuetify).mount('#app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-card>
    <v-tabs v-model="selectedtab">
      <v-tab value="one">Tab One</v-tab>
      <v-tab value="two">Tab Two</v-tab>
    </v-tabs>

    <v-card-text>
      <v-window v-model="selectedtab">
        <v-window-item value="one">
          Tab One content
        </v-window-item>

        <v-window-item value="two">
          Tab Two content
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</div>