How to dynamically tab changes in vue js 2 by selected props? - vue.js

Question

I am new in Vue JS. So, if anything wrong never mind.
I am using vue-bulma-tabs module for tabs component. I want to change the tabs dynamically from another component. Here, is a selected props for the currently selected tab. I want to change the selected props value by global variable so that I can show any tab from any component.Is it possible if not what is the solution? If possible, please answer me as soon as possible.
Here is my current tabs code:
<tabs>
<tab name="About Us">
<h1>This part is about us
</h1>
</tab>
<tab name="About our culture">
<h1>This part is about our culture
</h1>
</tab>
<tab name="About our vision" selected="selectedTab">
<h1>This part is about our vision
</h1>
</tab>
</tabs>
<button type="button" #click="GoTab ()">Go to tab</button>
I want when I click Go to tab button then it will go to About our vision tab.
My Vue Js code:
<script>
import TabParentComponent from
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from
'../../components/layout/tabChildComponent.vue'
export default {
components: {
'tab': TabChildComponent,
'tabs': TabParentComponent
},
data () {
return {
selectedTab: false
}
},
methods: {
GoTab () {
this.selectedTab = true
}
}
}
</script>
It works when seletedTab = true in data section. But I want to when button click it will be true otherwise false.
Especially, I want to keep a vuex store data. Depending on store value selectedTab will be true or false.

Answer 1

look this version with vuex
seletedTab is a getters, use it anywhere in the app.
Vue Js code:
<script>
import TabParentComponent from
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from
'../../components/layout/tabChildComponent.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
components: {
'tab': TabChildComponent,
'tabs': TabParentComponent
},
computed: {...mapGetters([
'selectedTab'
])
},
methods: {
...mapActions([
'GoTab'
])
}
}
</script>
Do not forget that the structure of the application with vuex will be slightly different! See Application Structure