Vee-validate issue

Not reproducible

by flexin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<div id="app">
  <parent-component>
    
  </parent-component>
</div>

JavaScript

Vue.component('parent-component', {
  template: `<div>
    Parent input: <input name="parent" v-validate="'required'" v-model="formdata.parent">
    {{ errors.first('parent') }}
             

    <child-component v-if="show" v-model="formdata.child"></child-component>
    <br/><a href="#" v-on:click.prevent="show = !show">Toggle child</a>
    <hr/>
    Parent this.fields:
    <div v-for="(f, i) in fields">
      {{i}}: {{f.valid}}
    </div>
    <hr/>
    Form data:<br/>
     - parent: {{formdata.parent}}<br/>
     - child: {{formdata.child}}
  </div>`,
  data: function() {
    return {
      show: true,
      formdata: {
         parent: '',
         child: ''
      }
    }
  },
  $_veeValidate: {
    validator: 'new' // give me a new validator on the parent component.
  },
  
});

Vue.component('child-component', {
  template: `<div>Child input: <input name="child" v-validate="'required'" v-model="newvalue">
    {{ errors.first('child') }}</div>`,
  inject: ['$validator'],
  props: {
     value: {}
  },
  data: function() {
    return {
      newvalue: ''
    }
  },
  mounted: function() {
    this.newvalue = this.value;
  },
  watch: {
     newvalue: function() {
        this.$emit('input', this.newvalue);
     }
  }
})

Vue.use(VeeValidate);

var app = new Vue({
  el: '#app',
})