Tab navigation and panes - https://codepen.io/tangoslee/pen/RwWpeva

NavTab.vue

<template>
  <div>

    <nav :id="id">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" v-for="({id:tabId, name}) in tabs" :key="tabId">
          <a class="nav-link" :class="activated(tabId)" role="tab" :aria-controls="tabId" :aria-selected="activated(tabId)"
             :href="hrefTag(tabId)" @click.prevent="setNavTab(tabId)">
            {{name}}
          </a>
        </li>
      </ul>
    </nav>

    <div class="tab-content" :id="contentId(id)">
      <template v-for="({id:tabId}) in tabs">
        <div class="tab-pane fade show" :class="{active: tab === tabId}" role="tabpanel" :aria-labelledby="tabLabel(tabId)">
          <slot :name="tabPaneName(tabId)"></slot>
        </div>
      </template>
    </div>


  </div>
</template>

<script>

  // @example
  // <nav-tab :options="options" active-tab="edit">
  //   <template #edit><div>Edit....</div></template>
  //   <template #code><div><textarea class="form-control" rows="15"/></div></template>
  //   <template #preview><div>Preview....</div></template>
  // </nav-tab>

  export default {
    name: "NavTab",
    props: {
      id: {
        type: String,
        default: 'nav-tab'
      },
      options: {
        type: Array,
        required: true
      },
      activeTab: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tab: this.activeTab,
      }
    },
    computed: {
      hrefTag() {
        return tabId => `#${tabId}`
      },
      contentId() {
        return id => `${id}-content`
      },
      tabLabel() {
        return tabId => `tab-${tabId}`
      },
      tabPaneName() {
        return tabId => `${tabId}`
      },
      tabs() {
        return this.options || []
      },
    },
    methods: {
      activated(id) {
        return {active: this.tab === id}
      },
      setNavTab(id) {
        this.tab = id
        this.$emit('change', id)
      },
    },
  }
</script>

<style scoped>

</style>