Как отображать разный контент на разных вкладках в vueJS

Раньше у меня была такая же проблема. смотри попробуй это.

Основные вкладки состоят из серии заголовков и соответствующего содержимого, относящегося к каждому заголовку. Определение отдельных компонентов выполняется динамически с использованием цикла for для создания вкладок.

<v-tabs
          fixed-tabs
          v-model="tab"
        >
          <v-tabs-slider color="amber darken-3"></v-tabs-slider>
          <v-tab
            v-for="(item, index) in items"
            :class="{active: currentTab === index}"
            @click="currentTab = index"
            :key="item"
          >
            {{ item }}
          </v-tab>
        </v-tabs>

       // Display different content here
        <v-tabs-items v-model="tab">
          <v-card flat>            
            <div v-show="currentTab === 0"><v-card-text>Tab0 content</v-card-text></div>
            <div v-show="currentTab === 1"><v-card-text>Tab1 content</v-card-text></div>
            <div v-show="currentTab === 2"><v-card-text>Tab2 content</v-card-text></div>
            <div v-show="currentTab === 3"><v-card-text>Tab3 content</v-card-text></div>
            <div v-show="currentTab === 4"><v-card-text>Tab4 content</v-card-text></div>
          </v-card>
        </v-tabs-items>
      </v-card>


export default {
   data () {
     return {
      currentTab: 0,
      tab: null,
      items: ['tab0', 'tab1', 'tab2', 'tab3', 'tab4'],
     }
  }

На мой взгляд, у Vuetify отличная документация, и ей легко следовать.

Из вкладок vuetify

часть "html"

<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs
        v-model="active"
        color="cyan"
        dark
        slider-color="yellow"
      >
        <v-tab
          v-for="n in 3"
          :key="n"
          ripple
        >
          Item {{ n }}
        </v-tab>
        <v-tab-item
          v-for="(text, index) in texts"
          :key="index"
        >
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>

      <div class="text-xs-center mt-3">
        <v-btn @click.native="next">next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

часть "javascript(vue)":

new Vue({
  el: '#app',
  data () {
    return {
      active: null,
      texts: ['first tab', 'second tab', 'third tab']
    }
  },
  methods: {
    next () {
      const active = parseInt(this.active)
      this.active = (active < 2 ? active + 1 : 0).toString()
    }
  }
})

Обратите внимание, что это немного изменено из примера документации vuetify