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

.isActive{
  color:green
}

JavaScript

/////// exclusive.vue
let active = {uid:false}
addEventListener('click', ()=> active.uid = false)
Vue.component('exclusive', {
	template:`<button @click.stop="active.uid = _uid" :class="{isActive}">{{isActive}}</button>`,
  data(){
  	return {active}
  },
	computed:{
  	isActive(){
    	return this._uid == this.active.uid
    }
  }
})

/////// main.vue
new Vue({
	el:'#vue',
})