vuejsでコンポーネントをボタンで切り替え

pages/debug.vue

<template>
  <div id="app">
    <button @click="setView('1')" v-bind:class="{active: currentView == 'page1'}">
      １
    </button>
    <button @click="setView('2')" v-bind:class="{active: currentView == 'page2'}">
      ２
    </button>
    <myComponent :is="currentView" />
  </div>
</template>

<script>
import page1 from '~/components/page1.vue'
import page2 from '~/components/page2.vue'

export default {
  components: {
    page1,
    page2
  },
  data () {
    return {
      currentView: 'page1'
    }
  },
  methods: {
    setView (val) {
      this.currentView = 'page' + val
    }
  }
}
</script>

<style scoped>
.active {
  background: red;
}
</style>

components/page1.vue

<template>
  <p>page1</p>
</template>

components/page2.vue

<template>
  <p>page2</p>
</template>