title: Vue.js - Can't properly validate a custom single file component with v-for using vee-validate
body: <p>I've been building a vue app and I'm currently building a component that has a &quot;Person&quot; object, and a few inputs fields to add information about that person, such as Name, address, email, etc. One of those fields is the mobile number, but a person can have more than one number, so I created a custom component that repeats the input field at will. This is roughly what it looks like. All those inputs are being validated using <a href="https://github.com/baianat/vee-validate" rel="nofollow noreferrer">vee validate</a>. This is roughly what is looks like:</p>
  <pre><code>     &lt;!--createPerson.vue --&gt;
       &lt;div class=&quot;form-group&quot;&gt;
          &lt;input v-model=&quot;person.firstName&quot; v-validate=&quot;'required'&quot; data-vv-delay=&quot;500&quot; name=&quot;first-name&quot; type=&quot;text&quot; placeholder=&quot;First name&quot;&gt;
          &lt;span v-show=&quot;errors.has('first-name')&quot; class=&quot;input__error&quot;&gt;{{ errors.first('first-name') }}&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;input v-model=&quot;person.lastName&quot; v-validate=&quot;'required'&quot; data-vv-delay=&quot;500&quot; name=&quot;last-name&quot; type=&quot;text&quot; placeholder=&quot;Last name&quot;&gt;
          &lt;span v-show=&quot;errors.has('last-name')&quot; class=&quot;input__error&quot;&gt;{{ errors.first('last-name') }}&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;repeatable-inputs v-model=&quot;person.mobiles&quot;  v-validate=&quot;'required'&quot; data-vv-value-path=&quot;input&quot; data-vv-name=&quot;mobile&quot; type=&quot;tel&quot; name=&quot;mobile&quot; placeholder=&quot;Mobile&quot; :inputmode=&quot;numeric&quot; link-name=&quot;mobile number&quot;&gt;&lt;/repeatable-inputs&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;input v-model=&quot;person.email&quot;  v-validate=&quot;'required|email'&quot; data-vv-delay=&quot;500&quot; name='email' type=&quot;text&quot; placeholder=&quot;Personal email&quot;&gt;
          &lt;span v-show=&quot;errors.has('email')&quot; class=&quot;input__error&quot;&gt;{{ errors.first('email') }}&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The person object, under the same createPerson.vue file, has a property called mobiles which starts as an empty array. It also has a validateAll() function, used as described in the vee-validate docs, that performs a validation of all inputs when clicking a &quot;Next&quot; button.
  Then, on the repeatableInputs.vue, there's this:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class=&quot;form-group&quot; v-for=&quot;(input, index) in inputs&quot;&gt;
              &lt;input
                  :type=&quot;type&quot;
                  :name=&quot;name+index&quot;
                  :placeholder=&quot;placeholder&quot;
                  :inputmode=&quot;inputmode&quot;
                  :value=&quot;input&quot;
                  @input=&quot;update(index, $event)&quot;
                  v-focus&gt;&lt;/input&gt;
  
          &lt;/div&gt;
  
          &lt;a href=&quot;#&quot; v-on:click.prevent=&quot;add&quot;&gt;Add another {{linkName}}&lt;/a&gt;
  
  
      &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          export default {
              props: {
                  value: {
                      type: Array,
                      default: ['']
                  },
                  type: {
                      type:       String,
                      default:    &quot;text&quot;
                  },
  
                  name:           String,
                  placeholder:    String,
                  inputmode:      String,
  
                  linkName: {
                      type:       String,
                      default:    &quot;input&quot;
                  }
              },
  
              data: function () {
                  return {
                      inputs: this.value
                  }
              },
              methods: {
                  add: function () {
                      this.inputs.push('');
                  },
  
                  update: function(index, e) {
                      this.inputs[index] = e.target.value;
                      this.$emit('input', this.inputs);
                  }
              }
          }
      &lt;/script&gt;
  </code></pre>
  <p>To be able to validate these custom inputs in the parent createPerson.vue, using the validateAll() function, the docs state that I must, quoting, <code>Should have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls)</code>.</p>
  <p>And this is where I got stuck. I'm not sure that that vv-path must point to, and I tried using 'value', ' input', 'inputs', creating a watch function, and a few other things that didn't even make much sense. I've found a git issue with validating custom inputs that used v-for, but that has apparently since been fixed.</p>