A Vue.js Tabbed Navigation snippet

tabs.js

const Page1 = { tabLabel: "Home", template: "<p>Home View Content</p>" };
const Page2 = { tabLabel: "Food", template: "<p>Food View Content</p>" };
const Page3 = { tabLabel: "Sports", template: "<p>Sports View Content</p>" };
const Page4 = { tabLabel: "Video Games", template: "<p>Games View Content</p>" };
const Page5 = { tabLabel: "Services", template: "<p>Services View Content</p>" };
const Page6 = { tabLabel: "Music", template: "<p>Music View Content</p>" };
const Page7 = { tabLabel: "Movies", template: "<p>Movie View Content</p>" };

const OtherComponent = { template: "<p><em>This content is not mixed in with tab components</em></p>" };

new Vue({
  el: "#app",
  template: `
<section class="section">
  <div class="container">
    <div class="tabs">
      <ul>
        <li v-for="c in tabComponents" 
            :key="c.tabLabel" 
            :class="{ 'is-active': currentPage === c }">
          <a @click="changePage(c)">{{ c.tabLabel }}</a>
        </li>
      </ul>
    </div>  

    <component :is="currentPage" />

    <other-component />

  </div>

</section>
`,
  data: {
    currentPage: Page1
  },
  methods: {
    changePage(pg) {
      this.currentPage = pg;
    }
  },
  computed: {
    tabComponents() {
      return Object
        .values(this.$options.components)
        .filter(c => c.hasOwnProperty("tabLabel"));
    }
  },
  components: { Page1, Page2, Page3, Page4, Page5, Page6, Page7, OtherComponent }
});