JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <my-checkbox check-value="foo" name="custom" v-model="componentSelectedItems">Component Foo</my-checkbox>
    <my-checkbox check-value="bar" name="custom" v-model="componentSelectedItems">Component Bar</my-checkbox>
    component selected items: {{componentSelectedItems}}
  </div>
  <br /><br />
  <div>
    <div><label><input type="checkbox" name="native" value="foo" v-model="nativeSelectedItems" />Native Foo</label></div>
    <div><label><input type="checkbox" name="native" value="bar" v-model="nativeSelectedItems" />Native Bar</label></div>
    native selected items: {{nativeSelectedItems}}
  </div>
</div>

JavaScript

Vue.component('my-checkbox', {
  template: '<div><label><input type="checkbox" :value="checkValue" :name="name" @change="onChange($event.target.value)" /><slot></slot></label></div>',
  props: ['checkValue', 'name'],
  methods: {
    onChange: function(value) {
      this.$emit('input', value)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    componentSelectedItems: [],
    nativeSelectedItems: []
  }
})