title: Vee-validate child date-picker component
body: <p>I am trying to write validate to my custom components using vee-validate   (vue version 2.5.3, vee-validate version 2.1.0-beta.7). Everything works fine except that fact that none of my datepickers pass validation. </p>
  
  <p><strong>PARENT.VUE</strong></p>
  
  <pre><code>template(v-for="(item, index) in items")
    div(class="initials")
      edit-date-field(:date="item.start"
                      :date_errors="errors.collect('start[' + index + ']')"
                      :name="startDate"
                      :data-vv-name="'start[' + index + ']'"
                      v-validate="'required'"
                      @date-picker="updateDate(item, 'start', $event)"
                      data-vv-as="date"
                      )
     edit-date-field(:date="item.end"
                     :date_errors="errors.collect('end[' + index + ']')"
                     :name="endDate"
                     :data-vv-name="'end[' + index + ']'"
                     v-validate="'required'"
                     data-vv-as="date"
                     @date-picker="updateDate(item, 'end', $event)")
   v-flex(xs12 sm12 md10 pa-2)
     v-text-field(
                slot="input"
                label="College"
                v-model="item.name"
                :error-messages="errors.collect('college[' + index + ']')"
                v-validate="'required'"
                :data-vv-name="'college[' + index + ']'"
                data-vv-as="college name"
                )
   v-flex(xs12 sm12 md10 pa-2)
     v-text-field(
                slot="input"
                label="Degree"
                v-model="item.degree"
                :error-messages="errors.collect('degree[' + index + ']')"
                v-validate="'required'"
                :data-vv-name="'degree[' + index + ']'"
                data-vv-as="degree"
                )
  v-btn(v-if="!item.id" color="primary" @click="create(item)" depressed small) Save
  </code></pre>
  
  <p><strong>CHILD.VUE</strong></p>
  
  <pre><code>&lt;template lang="pug"&gt;
    v-layout(row wrap)
      v-flex(xs12 sm9)
        v-menu(
              ref='menu'
              lazy
              :close-on-content-click='false'
              transition='scale-transition'
              offset-y=''
              full-width
              :nudge-right='40'
              min-width='290px'
              )
          v-text-field(
                      slot="activator"
                      v-model='datePicker'
                      :error-messages="date_errors"
                      :label='name'
                      prepend-icon='event'
                      readonly
                      )
          v-date-picker(
                     v-model='datePicker'
                     color="indigo"
                     min='1950-01-01'
                     max='2020-01-01'
                     @input="updateDate(datePicker)"
                     )
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: {
      menu: {
        type: Boolean,
        default: false
      },
      date: {
        type: String
      },
      name: {
        type: String,
        required: true
      },
      date_errors: {},
    },
     data() {
       return {
         datePicker: this.date
       }
     },
     methods: {
       updateDate(value) {
         this.$refs.menu.save(value);
         this.$emit('date-picker', value)
       }
     }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>So my college and degree validations work fine, but edit-date-field not. I tried to put my code to codesandbox but without success. I attach gif I made to provide more information. Thanks in advance. <a href="http://g.recordit.co/3glKTTo7t2.gif" rel="nofollow noreferrer">Gif</a>    </p>