JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

<div id="app">
  <v-checkbox
    v-for="n in items"
    v-model="checked"
    :value="n.value"
    name="items[]"
  >
    {{ n.label }}
  </v-checkbox>
  <pre>{{ checked }}</pre>
</div>

JavaScript

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

new Vue({
  el: '#app',
  data: () => ({
    items: [
      { label:  'hello, world!!', value:  69 },
      { label:  'fuck the world', value: 187 },
      { label: 'fuck everything', value: 666 },
    ],
    checked: [ 187 ],
  }),
  watch: {
    checked(val) {
      if (val.length > 1) {
        this.checked = val.slice(-1);
      }
    },
  },
});