title: VeeValidate attach method: A field is missing a "name" or "data-vv-name" attribute when fields do have name
body: <p>I have a parent component rendering a personal details component and am injecting the parent's validator scope. if I use the <code>v-validate</code> directive and <code>this.$validator.validateAll()</code> or <code>this.$validator.validate('field_name')</code> this works fine.</p>
  
  <p>However, I need to validate some fields independently, but when using <code>this.$validator.attach('first_name', 'required')</code> for example I am getting the following warning <code>[vee-validate] A field is missing a "name" or "data-vv-name" attribute</code>. I have tried moving the call to attach the validators into the click handler, in case the input element isn't fully rendered when calling it from <code>mounted()</code> but still get the same problem. I have also tried both <code>name</code> or <code>data-vv-name</code> attributes independently.</p>
  
  <p>Parent.ts</p>
  
  <pre><code>import { Vue, Component } from 'vue-property-decorator';
  
  import PersonalDetailsComponent from './PersonalDetails';
  
  @Component({
      template: `
          &lt;div class="container"&gt;
              &lt;personal-details-component&gt;&lt;/personal-details-component&gt;
  
              &lt;div class="row"&gt;
                      &lt;Button :onClick="handleButtonClick" :buttonText="'Validate'"&gt;&lt;/Button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      `,
      components: {
          PersonalDetailsComponent,
      },
      $_veeValidate: {validator: 'new'}
  })
  export default class ClaimComponent extends Vue {
  
      mounted() {
          this.attachValidators();
      }
  
      handleButtonClick() {
          this.$validator.validateAll();
      }
  
      attachValidators() {
          console.log(document.getElementsByName('first_name')); // Finds the element
  
          this.$validator.attach('first_name', 'required');
          this.$validator.attach('surname', 'required');
          this.$validator.attach('email', 'required');
      }
  
  }
  </code></pre>
  
  <p>PersonalDetails.ts</p>
  
  <pre><code>import {Vue, Component, Inject} from 'vue-property-decorator';
  
  import {Validator} from 'vee-validate';
  
  @Component({
      template: `
      &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
              &lt;form class="material-form"&gt;
                  &lt;div class="group w-third"&gt;
                      &lt;input v-model="first_name" type="text" name="first_name" required&gt;
                      &lt;span class="highlight"&gt;&lt;/span&gt;
                      &lt;span class="bar"&gt;&lt;/span&gt;
                      &lt;label&gt;First name&lt;/label&gt;
                      &lt;span class="form-text error-text"&gt;{{ errors.first('first_name') }}&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="group w-third"&gt;
                      &lt;input v-model="surname" type="text" name="surname" required&gt;
                      &lt;span class="highlight"&gt;&lt;/span&gt;
                      &lt;span class="bar"&gt;&lt;/span&gt;
                      &lt;label&gt;Surname&lt;/label&gt;
                      &lt;span class="form-text error-text"&gt;{{ errors.first('surname') }}&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="group w-third"&gt;
                      &lt;input v-model="email" type="text" name="email" required&gt;
                      &lt;span class="highlight"&gt;&lt;/span&gt;
                      &lt;span class="bar"&gt;&lt;/span&gt;
                      &lt;label&gt;Email address&lt;/label&gt;
                      &lt;span class="form-text error-text"&gt;{{ errors.first('email') }}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      `
  })
  export default class PersonalDetailsComponent extends Vue {
      @Inject('$validator') public $validator!: Validator;
  
      first_name: string = '';
      surname: string = '';
      email: string = '';
  
  }
  </code></pre>