JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vue">
<checkbox v-model="stuff" value="woot"></checkbox>
<checkbox v-model="stuff" value="hello"></checkbox>
<checkbox v-model="stuff" value="test"></checkbox>
{{stuff}}
<hr>
<checkbox v-model="bool"></checkbox>{{bool}}
</div>

JavaScript

new Vue({
	el:'#vue',
  data:{
  stuff:[],
  bool:false
  },
  components:{
  	checkbox:{
    	props:['checked','value'],
      model: {
        prop: 'checked',
        event: 'input'
      },
    	template:`
      	<button v-if="Array.isArray(checked)" @click="click">{{checked.includes(value) ? 'X' : 'O'}}</button>
        <button v-else @click="$emit('input', !checked)">{{checked ? 'X' : 'O'}}</button>
        `,
      methods:{
      	click(){
        	let checked = [].concat(this.checked)
        	if(checked.includes(this.value)){
          	checked.splice(checked.indexOf(this.value), 1)
          } else {
          	checked.push(this.value)
          }
          this.$emit('input',checked)
        }
      }
    }
  }
})