How can I make this v-tabs Vuetify.js component work?

Question

I have this v-tabs component added on a page.

In the example there's only 1 block of data (text) binded to the component (all 3 tabs display this text data):

<template>
  <v-tabs fixed centered>
    <v-tabs-bar class="cyan" dark>
      <v-tabs-slider class="yellow"></v-tabs-slider>
      <v-tabs-item
        v-for="i in items"
        :key="i"
        :href="'#tab-' + i"
      >
        {{ i }}
      </v-tabs-item>
    </v-tabs-bar>
    <v-tabs-items>
      <v-tabs-content
        v-for="i in items"
        :key="i"
        :id="'tab-' + i"
      >
        <v-card flat>
          <v-card-text>{{ text }}</v-card-text>
        </v-card>
      </v-tabs-content>
    </v-tabs-items>
  </v-tabs>
</template>

<script>
  export default {
    data () {
      return {
        items: ['Item One', 'Item Seventeen', 'Item Five'],
        text: 'Lorem ipsum dolor sit amet, consectetur'
      }
    }
  }
</script>

How do I display a separate block of data in each tab?

Answer 1

For using custom components inside each tab in vuetify in 2020 use:

   <v-container>
    <v-tabs centered>
      <v-tabs-slider/>
      <v-tab>Tab1</v-tab>
      <v-tab>Tab2</v-tab>
      <v-tab>Tab3</v-tab>

      <v-tab-item>
        <MyView1 />
      </v-tab-item>
      <v-tab-item>
        <MyView2 />
      </v-tab-item>
      <v-tab-item>
        <MyView3 />
      </v-tab-item>
    </v-tabs>
  </v-container>