vue seperate tab content to external tab code example

Example: vue seperate tab content to external tab

<b-dd text="Change tab" class="mb-3">
 <b-dd-item @click="tabIndex = 0">Page 1</b-dd-item>
 <b-dd-item @click="tabIndex = 1">Page 2</b-dd-item>
 <b-dd-item @click="tabIndex = 2">Page 3</b-dd-item>
 <b-dd-item @click="tabIndex = 3">Page 4</b-dd-item>
</b-dd>
  
<b-tabs id="myTabs" v-model="tabIndex" nav-wrapper-class="d-none">
 <b-tab>I'm the first tab</b-tab>
 <b-tab>I'm the second tab</b-tab>
 <b-tab>I'm the third tab</b-tab>
 <b-tab>I'm the fourth tab</b-tab>
</b-tabs>

<script>
new Vue({
 el: "#app",
 data: {
  tabIndex: 0
 }
});
</script>