How to dynamically exit the tabs from the text that I need?

Question

Vue.js

I have one moment, how can I make the text that I need displayed in the tabs tabs, because what I did, the text stopped displaying at all, it’s not clear to me here. In the future, of course, this will be a form of authorization and registration. I am using Vuetify library
Here is an example of my sandbox
https://codesandbox.io/s/0qo18zy82v

<template>
  <div class="authorization">
    <div>
      <v-tabs
              v-model="active"
              color="teal"
              centered
              dark
              icons-and-text
      >
          <v-tabs-slider color="yellow"></v-tabs-slider>

          <v-tab href="#login">
              Авторизация
              <v-icon>lock_open</v-icon>
          </v-tab>

          <v-tab href="#registration">
              Регистрация
              <v-icon>how_to_reg</v-icon>
          </v-tab>

          <v-tab-item
                  v-for = "{item, index} in items"
                  :id = "index"
                  :key = "index"
          >
              <v-card flat>
                  <v-card-text>{{ item }}</v-card-text>
              </v-card>
          </v-tab-item>
      </v-tabs>
    </div>
  </div>
</template>

<script>
  export default {
        name: "AppComponent",
        data () {
            return {
                items: [{registration: 'registration form', login: 'login form'}],
            }
        }
    }
</script>

<style scoped>

</style>

Found an example with angular. Roughly assumed that this should be done in html markup, but for now there is no awareness
https://codepen.io/akshatamohanty/pen/JXPQXw

Answer 1

Remove href attributes from v-tabs.
I also don't see you using v-app. Where is v-app? Why is it not?