Vue.js checkbox (single/multi) wrapper

checkbox-wrapper.js

const checkboxWrap = {
  props: ['value', 'vModelValue'],
  model: {
    prop: 'vModelValue',
    event: 'checkbox-updated'
  },
  data() {
    return {
      proxyResult: null
    };
  },
  computed: {
    proxy: {
      get() {
        return this.vModelValue;
      },
      set(newProxyResult) {
        this.proxyResult = newProxyResult;
      }
    }
  },
  methods: {
    emitCheckboxUpdated() {
      this.$emit('checkbox-updated', this.proxyResult);
    }
  }
};

Vue.component('single-checkbox-wrapper', {
  mixins: [checkboxWrap],
  template: `
    <div>
      <label>
        <input 
          type="checkbox"
          v-model="proxy"
          @change="emitCheckboxUpdated"
        />
        {{ label }}
      </label>
    </div>
  `,
  props: {
    label: {
      type: String,
      required: true
    }
  }
});

Vue.component('multi-checkbox-wrapper', {
  mixins: [checkboxWrap],
  template: `
    <div>
      <label>
        <input 
          type="checkbox"
          :value="value"
          v-model="proxy"
          @change="emitCheckboxUpdated"
        />
        {{ label }}
      </label>
    </div>
  `,
  props: {
    value: {
      type: Array,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  }
});