simple chebox input component for vue.js

inputCheck.vue

<template>
  <span :class="propClass">
    <input
      :id="inputId"
      v-model="selected"
      type="checkbox"
      :name="inputName"
      :value="value"
    />
    <label :for="inputId" @click.stop="$emit('click')">
      {{ labelText }}
    </label>
  </span>
</template>

<script>
export default {
  name: 'InputCheck',
  model: {
    prop: 'modelValue',
    event: 'change',
  },
  props: {
    modelValue: { type: [Array, Boolean], default: () => [] },
    value: { type: String, default: '' },
    inputId: { type: String, default: '' },
    inputName: { type: String, default: '' },
    labelText: { type: String, default: '' },
    propClass: { type: String, default: 'chkA' },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {}
  },
  computed: {
    checked() {
      return this.options.includes(this.value)
    },
    selected: {
      get() {
        return this.modelValue
      },
      set(val) {
        console.log(val)
        this.$emit('change', val)
      },
    },
  },
  methods: {
    updateValue(e) {
      // const isChecked = e.target.checked
      // if (Array.isArray(this.modelValue)) {
      //   const newValue = [...this.modelValue]
      //   if (isChecked) {
      //     newValue.push(this.value)
      //   } else {
      //     newValue.splice(newValue.indexOf(this.value), 1)
      //   }
      //   console.log('change ', newValue)
      //   this.$emit('change', newValue)
      // } else {
      //   this.$emit('change', !!isChecked)
      // }
    },
  },
}
</script>