title: How to validate dynamic input field in vue.js?
body: <p>I am using <code>vuelidate</code> to validate input field, the input field is dynamic i.e the value in input field is filled dynamically with <code>jsonData</code> using <code>v-model</code></p>
  
  <p><strong>What I am trying to do is</strong></p>
  
  <p>On blur I want to show error if there is any, but here when I type anything inside my input field it shows nothing </p>
  
  <p>what I am doing:- my input field</p>
  
  <pre><code>    &lt;div v-for="data in displayProfileData" :key="data.email" &gt;
       &lt;p&gt;{{data}}&lt;/p&gt;
     &lt;div class="row"&gt;
         &lt;div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"&gt;
                          &lt;label for="phoneNo"&gt;Name&lt;/label&gt;
                &lt;input v-model="data.businessname"
                @blur="$v.form.name.$touch()"
                type="text" 
                              class="form-control" name="name"
                              id="name"&gt;
               &lt;div v-if="$v.form.name.$error" class="form-error"&gt;
                 &lt;span v-if="!$v.form.name.required" class="text-danger"&gt;nameis required&lt;/span&gt;
               &lt;/div&gt;
                      &lt;/div&gt;
            &lt;p&gt;{{$v}}&lt;/p&gt;
     &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>I am displaying <code>$v</code> on UI to check but when I type in input field no changes is been detected</p>
  
  <p>My script code :-</p>
  
  <pre><code>    &lt;script&gt;
  import { required,minLength } from 'vuelidate/lib/validators'
  import axios from '../../services/base-api'
  export default {
      data (){
        return{
            form :{
          name:''
            },
             displayProfileData:[]
        }
    },
    validations: {
      form: {
        name:{required}, 
      }
    },
    created(){
          this.userId = localStorage.getItem('user-Id')
          axios().post('/api/v1/Profile/getProfileData',this.userId)
          .then(res=&gt;{
                  console.log(res.data)
                  this.displayProfileData=res.data
  
  })
  .catch(err=&gt;{
      this.$toasted.error(err,{duration:2000})
  })
  
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My data from server is in format like this <code>{ "businessid": "8126815643", "businessname": "manish",}</code></p>
  
  <p><strong>Issue</strong>
  Initially when page loads in input field it shows <code>manish</code> so when I change it to something else and focus out it shows error that <code>name is required</code> I don't what is going wrong</p>
  
  <p><a href="https://i.stack.imgur.com/OLRF7.png" rel="nofollow noreferrer">2</a>:<a href="http://simple-vue-validator.magictek.cn/#dynamic_form" rel="nofollow noreferrer">Dynamic Form- Check Here</a></p>
  
  <p>please check this <a href="https://i.stack.imgur.com/OLRF7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OLRF7.png" alt="enter image description here"></a></p>