Activate a tab from tabs

[datawaterco]

Hi guys,

Thanks for your attention. I am new to this Vuetify 3. Hopefully, someone can help me here.

I want to activate a tab using a button (eventually based on an event).

When I click the Activate Register button, I want it activate (from the current Login tab).

What happens is that after I click the button, it becomes like this-> the window item elements are gone:

Here are the codes I am using:

<template>
  <v-main>
    <v-tabs v-model="loginrego">
      <v-tab key="Login">
        <v-icon large> mdi-account</v-icon>
        <div class="caption py-1"> Login</div>
      </v-tab>
      <v-tab key="Register">
        <v-icon large> mdi-account-outline</v-icon>
        <div class="caption py-1"> Register</div>
      </v-tab>
    </v-tabs>

    <v-window v-model="loginrego">
      <v-window-item key="Login">
        <v-card class="px-4">
          <v-card-text>
            abc
          </v-card-text>
        </v-card>
      </v-window-item>
      <v-window-item key="Register">
        <v-card class="px-4">
          <v-card-text>
            xyz
          </v-card-text>
          <!-- <v-dialog v-model="dialog" activator="parent"> -->
        </v-card>
      </v-window-item>
    </v-window>
    <v-btn @click="this.loginrego = 'Login'">activate login</v-btn>
    <v-btn @click="this.loginrego = 'Register'">activate register</v-btn>
  </v-main>
</template>

<script lang="ts">


export default {
  name: "ContactView",
  data() {
    return {

      loginrego: "Register"
    }

  }
}
</script>