JSFiddle - React, Tailwind, and code Playground
HTML
<div id="vue">
<exclusive></exclusive>
<exclusive></exclusive>
<exclusive></exclusive>
<exclusive></exclusive>
<exclusive></exclusive>
<exclusive></exclusive>
<exclusive></exclusive>
</div>
CSS
.active{
color:green
}
JavaScript
Vue.component('exclusive', {
template:`<button @click.stop="$root.active = _uid" :class="{active}">{{active}}</button>`,
computed:{
active(){
return this._uid == this.$root.active
}
}
})
new Vue({
el:'#vue',
data(){
return {
active:false
}
},
})