title: Displaying error messages in vuetify when validating nested object with vuelidate
body: <p>I am using <a href="https://github.com/monterail/vuelidate" rel="noreferrer">vuelidate</a> to validate my form input and display the error messages using <a href="https://vuetifyjs.com/en/components/forms#example-vuelidate" rel="noreferrer">vuetifyjs</a>. I managed to do the basic object validation and am able to show the error messages.</p>
  
  <p>However I'm having issues with displaying the error messages when I validate a collection.</p>
  
  <p><strong>ISSUE</strong></p>
  
  <p>Example data structure:</p>
  
  <pre><code>contact: {
    websites: [
      {
        url: 'http://www.something.com',
        label: 'Website',
      }
    ]
  }
  </code></pre>
  
  <p>Example validation:</p>
  
  <pre><code>validations: {
    websites: {
      $each: {
        url: {
          url,
        }
      }
    },
  }
  </code></pre>
  
  <p>Example template:</p>
  
  <pre><code>&lt;template v-for="(website, index) in websites"&gt;
          &lt;v-layout row :key="`website${index}`"&gt;
            &lt;v-flex xs12 sm9 class="pr-3"&gt;
              &lt;v-text-field
                      label="Website"
                      :value="website.url"
                      @input="$v.websites.$touch()"
                      @blur="$v.websites.$touch()"
                      :error-messages="websiteErrors"
              &gt;&lt;/v-text-field&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Example computed error message:</p>
  
  <pre><code>websiteErrors() {
          console.log('websites',this.$v.websites) // contains $each
          const errors = []
          if (!this.$v.websites.$dirty) {
            return errors
          }
          // Issue is that all of them show must be valid, even if they are valid. 
          // Validation is basically broken.
          // I also tried this.$v.websites.$each.url
          !this.$v.websites.url &amp;&amp; errors.push('Must be valid url')
          return errors
        },
  </code></pre>
  
  <p>Example method (Update, also tried method with passing index):</p>
  
  <pre><code>websiteErrors(index) {
          console.log('this.$v.entity.websites', this.$v.entity.websites.$each.$iter, this.$v.entity.websites.$each.$iter[index], this.$v.entity.websites.minLength, this.$v.entity.websites.$each.$iter[index].url)
          const errors = []
          if (!this.$v.entity.websites.$dirty) {
            return errors
          }
  
          !this.$v.entity.websites.$each.$iter[index].url &amp;&amp; errors.push('Must be valid url')
          return errors
        },
  </code></pre>
  
  <p>However when I do this, it will always be true and therefore never show the error.</p>
  
  <p><strong>EXPECTED</strong></p>
  
  <p>I would like to have the same example working as seen in <a href="https://monterail.github.io/vuelidate/#sub-collections-validation" rel="noreferrer">vuelidate sub-collection validation</a> The difference is instead of looping in the template I would like to generate the message programmatically.</p>
  
  <p><strong>REFERENCE</strong></p>
  
  <p>Example provided by vuelidate:</p>
  
  <pre><code>import { required, minLength } from 'vuelidate/lib/validators'
  
  export default {
    data() {
      return {
        people: [
          {
            name: 'John'
          },
          {
            name: ''
          }
        ]
      }
    },
    validations: {
      people: {
        required,
        minLength: minLength(3),
        $each: {
          name: {
            required,
            minLength: minLength(2)
          }
        }
      }
    }
  }
  
  &lt;div&gt;
    &lt;div v-for="(v, index) in $v.people.$each.$iter"&gt;
      &lt;div class="form-group" :class="{ 'form-group--error': v.$error }"&gt;
        &lt;label class="form__label"&gt;Name for {{ index }}&lt;/label&gt;
        &lt;input class="form__input" v-model.trim="v.name.$model"/&gt;
      &lt;/div&gt;
      &lt;div class="error" v-if="!v.name.required"&gt;Name is required.&lt;/div&gt;
      &lt;div class="error" v-if="!v.name.minLength"&gt;Name must have at least {{ v.name.$params.minLength.min }} letters.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button class="button" @click="people.push({name: ''})"&gt;Add&lt;/button&gt;
      &lt;button class="button" @click="people.pop()"&gt;Remove&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="form-group" :class="{ 'form-group--error': $v.people.$error }"&gt;&lt;/div&gt;
    &lt;div class="error" v-if="!$v.people.minLength"&gt;List must have at least {{ $v.people.$params.minLength.min }} elements.&lt;/div&gt;
    &lt;div class="error" v-else-if="!$v.people.required"&gt;List must not be empty.&lt;/div&gt;
    &lt;div class="error" v-else-if="$v.people.$error"&gt;List is invalid.&lt;/div&gt;
    &lt;button class="button" @click="$v.people.$touch"&gt;$touch&lt;/button&gt;
    &lt;button class="button" @click="$v.people.$reset"&gt;$reset&lt;/button&gt;
    &lt;tree-view :data="$v.people" :options="{rootObjectKey: '$v.people', maxDepth: 2}"&gt;&lt;/tree-view&gt;
  &lt;/div&gt;
  </code></pre>