title: Vue vuelidate $v is not defined
body: <p>I am new to vue js my main.js file looks like this</p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  import router from './routes.js'
  import Vuelidate from 'vuelidate'
  createApp(App).use(Vuelidate)
  createApp(App).use(router).mount('#app')
  </code></pre>
  <p>and my form components looks like this</p>
  <pre><code>&lt;template&gt;
      &lt;form methos=&quot;post&quot; v-on:submit.prevent=&quot;submit&quot;&gt;
      &lt;input type=&quot;text&quot; v-model.trim=&quot;$v.indate.$model&quot; :class=&quot;{'is-invalid': 
       validationStatus($v.indate)}&quot; class=&quot;form-control mt-2 mb-2&quot;  placeholder=&quot;DD/MM/YYYY&quot;&gt;
          &lt;div v-if=&quot;!$v.indate.required&quot; class=&quot;invalid-feedback&quot;&gt;Inward date is required.&lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import {required} from 'vuelidate/lib/validators'
      export default {
          name: 'FormInward',
          validations: {
              indate: {required}
          },  
          data: function(){
              return {
                  indate: ''
              }
          },          
          methods: {
              validationStatus: function(validation){
                  return typeof validation != &quot;undefined&quot; ? validation.$error : false;
              },
              submit: function() {
                  this.$v.$touch();
                  if (this.$v.$pendding || this.$v.$error) return;
                  console.log(this.$v);
              }
          }
      }
      &lt;/script&gt;
  </code></pre>
  <p>but i cant use the vuelidate it shows error like &quot;Property &quot;$v&quot; was accessed during render but is not defined on instance.&quot;
  when i check with &quot;<strong>console.log(this.$v)</strong>&quot; - it shows &quot;<strong>undefined</strong>&quot;</p>