vuejs custom checkbox vee-validate

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<div id="app">

  <div class="row">
    <p>
      custom input: checkbox {{checkmeplease}}
    </p>
    <custom-checkbox
      v-validate="'required'"
      data-vv-name="checkmeplease"
      label="checkmeplease"
      v-model="checkmeplease"
     >
    </custom-checkbox>
    <p v-show="errors.has('checkmeplease')">
      {{ errors.first('checkmeplease') }}
    </p>
  </div>

  <hr>

  <div class="row">
    <p>
      default input: checkbox
    </p>
    <label>
      checkmeok
      <input type="checkbox" name="checkmeok" @change="checkmeok = $event.target.checked ? true : null" v-model='checkmeok' v-validate="'required'">
    </label>
    <div v-show="errors.has('checkmeok')">Error</div>
  </div>

  <hr>

  <div class="row">
    <p>
      custom input: text
    </p>
    <custom-input v-validate="'required|email'" data-vv-value-path="innerValue" data-vv-name="custom" label="Email" :has-error="errors.has('custom')">
    </custom-input>
    <p v-show="errors.has('custom')">
      {{ errors.first('custom') }}
    </p>
  </div>

  <hr>

  <div class="row">
    <p>
      default input: text
    </p>
    <input type="text" name="email" v-model='email' v-validate="'required'">
    <div v-show="errors.has('email')">Error</div>
  </div>

  <hr>

  <p>
    {{errors}}
  </p>

  <hr>

  <button @click="validate" type="button">Validate All</button>

</div>

<template id="custom-input">
  <div>
    <label class="label">{{ label }}</label>
    <p class="control">
      <input v-model="innerValue" type="text" placeholder="Enter an email">
    </p>
  </div>
</template>

<template id="custom-checkbox">
  <div>
    <label class="label">
      {{ label }}
      <input
        v-model="value"
        data-vv-value-path="value"
        @change="change"
        type="checkbox"
      >
      {{ value }}
    </label>
 ...

JavaScript

Vue.use(VeeValidate);

Vue.component('custom-checkbox', {
  template: '#custom-checkbox',
  props: {
    label: String,
    hasError: Boolean
  },
  data: () => ({
    value: null
  }),
  watch: {
    value(value) {
      this.$emit('input', value);
    }
  },
	methods: {
    change (event) {
      this.value = event.target.checked ? true : null
    }
  }
});

Vue.component('custom-input', {
  template: '#custom-input',
  props: {
    label: String,
    hasError: Boolean
  },
  data: () => ({
    innerValue: null
  }),
  watch: {
    innerValue(value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    email: '',
    checkmeplease: null,
    checkmeok: null
  },
  updated(){
  	
  },
  methods: {
    validate() {
    	console.log(this.data);
      this.$validator.validateAll().then(res => {
        if (res) {
          alert('success');
          return;
        }

        alert('failed', res);
      });
    }
  }
});