title: Vuejs pass vee-validate to custom checkbox input
body: <p>I can not make custom checkbox component with vee-validate support. I'm newbie in Vue. In my app checkbox must be required. But it doesn't work. I read a lot of articles about vee-validate and custom inputs, but all examples based on simple custom text inputs.</p>
  
  <p>Below my code at this moment.</p>
  
  <p><strong>Parent component</strong>:</p>
  
  <pre><code>    &lt;!-- Custom text input. Vee-validate works nice. --&gt;
      &lt;input-text
          name="email"
          placeholder="Please, enter email"
          label="Email"
          :required="true"
          :type="'email'"
          :value.sync="shareholder.fields.email"
          v-validate.initial="'required|email'"
          data-vv-delay="500"
          :className="{'error': isShowError('email')}"
          :disabled="isDisabled"
      /&gt;
  
      &lt;!-- Custom checkbox input. Vee-validate doesn't work. --&gt;
      &lt;checkbox2
          name="consent"
          v-if="consent"
          class="consent"
          :required="true"
          :disabled="isDisabled"
          :className="{'error': errors.first('consent')}"
          :error="errors.first('consent')"
          v-model="consentStatus"
          v-validate.initial="'required'"
      &gt;
          {{consent.text}}&lt;br&gt;&lt;a :href="consent.link" target="_blank"&gt;{{consent.linkText}}&lt;/a&gt;
      &lt;/checkbox2&gt;
      {{ errors.first('consent') }}
  </code></pre>
  
  <p>File <strong>check-box.vue</strong>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="checkbox"
           :class="{ active: !!value }"
      &gt;
          &lt;label class="control"&gt;
              &lt;input
                  @change="handleChange"
                  type="checkbox"
                  :name="name"
                  :checked="value"
              /&gt;
              &lt;span class="icon-checkbox"&gt;&lt;/span&gt;
          &lt;/label&gt;
  
          &lt;div class="label"&gt;
              &lt;slot /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script src="./check-box.js"&gt;&lt;/script&gt;
  &lt;style lang="stylus" src="./check-box.styl" scoped&gt;&lt;/style&gt;
  </code></pre>
  
  <p>File <strong>check-box.js</strong>:</p>
  
  <pre><code>export default {
      name: 'checkbox2',
      inject: [ '$validator', ],
      // In one of articles I read I must bind event and value
      // with check box like below. But it seems it doesn't work too.
      model: {
          event: 'input',
          value: 'checked',
      },
      props: {
          value: {
              type: Boolean,
              default: false,
          },
          error: {
              type: String,
          },
          name: String,
          disabled: Boolean,
          className: Object,
          required: Boolean,
      },
      data: function() {
          return {
              checked: false,
          }
      },
      methods: {
          handleChange() {
              if (!this.disabled) {
                  this.checked = !this.value
                   // If I emit 'change' instead of 'input',
                   // checkbox component works wrong.
                  this.$emit('input', this.checked)
              }
          },
      },
      created() {
          this.checked = this.value
          this.$validator = this.$parent.$validator
      },
  }
  </code></pre>