JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <app-checkbox
    v-for="n in items"
    v-model="checked"
    :val="n.value"
  >{{ n.label }}</app-checkbox>
  <pre>{{ checked }}</pre>
</div>

JavaScript

Vue.component('app-checkbox', {
  props: [ 'value', 'val' ],
  template: `
<div>
  <label>
    <input 
      type="checkbox" 
      :value="val"
      v-model="model"
    >
    <slot></slot>
  </label>
</div>`,
  computed: {
	  model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
});

new Vue({
  el: '#app',
  data: {
    items: [
      { value: 'value1', label: '1111!!!!' },
      { value: 'value2', label: '2' },
      { value: 'value3', label: '3-3-3' },
      { value: 'value4', label: '4... 4... 4...' },
      { value: 'value5', label: '5 55 555' },
    ].map((n, i) => ({ ...n, id: i + 1 })),
    checked: [ 'value2', 'value3' ],
  },
});