title: How can I make this v-tabs Vuetify.js component work?
body: <p>I have  <a href="https://vuetifyjs.com/components/tabs#example-2" rel="nofollow noreferrer">this</a> <code>v-tabs</code> component added on a page.</p>
  
  <p>In the example there's only 1 block of data (<code>text</code>) binded to the component (all 3 tabs display this <code>text</code> data):</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-tabs fixed centered&gt;
      &lt;v-tabs-bar class="cyan" dark&gt;
        &lt;v-tabs-slider class="yellow"&gt;&lt;/v-tabs-slider&gt;
        &lt;v-tabs-item
          v-for="i in items"
          :key="i"
          :href="'#tab-' + i"
        &gt;
          {{ i }}
        &lt;/v-tabs-item&gt;
      &lt;/v-tabs-bar&gt;
      &lt;v-tabs-items&gt;
        &lt;v-tabs-content
          v-for="i in items"
          :key="i"
          :id="'tab-' + i"
        &gt;
          &lt;v-card flat&gt;
            &lt;v-card-text&gt;{{ text }}&lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tabs-content&gt;
      &lt;/v-tabs-items&gt;
    &lt;/v-tabs&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data () {
        return {
          items: ['Item One', 'Item Seventeen', 'Item Five'],
          text: 'Lorem ipsum dolor sit amet, consectetur'
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I display a separate block of data in each tab?</p>