simple tab component vuejs

<template>
  <div class="tabs">
      <nav class="nav" :tabs="tabs">
        <span v-for="tab in tabs"
           class="nav-link"
           :key="tab"
           :class="{'active': activeTab === tab}"
           @click="onClick(tab)"
        >{{tab}}</span>
      </nav>
    <div class="tab-content mt-5">
      <div v-for="tab in tabs"
           class="tab-pane fade"
           :class="{'show active': activeTab === tab}"
           :key="tab"
      >
        <slot v-if="activeTab === tab" :name="tab"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => this.tabs
    },
    active: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeTab: this.active
    }
  },
  methods: {
    onClick (tab) {
      this.activeTab = tab
      this.$emit('onClick', tab)
    }
  }
}
</script>

<style lang="sass" scoped>
  .nav-link
    border: none
    cursor: pointer
    margin-right: 1rem
    padding-bottom: .5rem
    &.active
      border-bottom: 2px solid $primary

</style>

на странице

<vu-tabs :tabs="['ALL', 'SINGLE', 'DOUBLE']" active="ALL" @onClick="changeTab($event)">
  <div class="row" slot="ALL"></div>
  <div class="row" slot="SINGLE"></div>
  <div class="row" slot="DOUBLE"></div>
</vu-tabs>