checkbox.vue

<script>
export default {
  props: ['label', 'checked'],
  data() {
    return {
      classes: {
        'checkbox-input-active': this.checked
      },
    }
  },
  methods: {
    onChange(event) {
      this.$emit('change', this.$refs.boxOfCheck.checked)
    },
  },
}
</script>

<template>
  <label class="checkbox df aic acc" :class="{'checkbox-input-active' : checked}">
    <span class="checkbox-input bgshadow--out">
      <span class="checkbox-input-inner :bc1 ::bc1 @bc1 ft4 tcg50"></span>
      <input ref="boxOfCheck" :checked="checked" @change="onChange" type="checkbox" class="checkbox-input-original"
      :class="classes">
    </span>
    <span class="ml1 ft4 tcg50">{{ label }}</span>
  </label>
</template>