title: Property or method "$v" is not defined using Vuelidate
body: <p><strong>Error:</strong></p>
  <blockquote>
  <p>[Vue warn]: Property or method &quot;$v&quot; is not defined on the instance but
  referenced during render. Make sure that this property is reactive,
  either in the data option, or for class-based components, by
  initializing the property. See:
  <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  <p>found in</p>
  <p>---&gt;  at resources\assets\js\components\products\Product_create.vue
  </p>
  </blockquote>
  <p>I'm using Vue.js and Vuelidate as validator,
  I've copied and pasted this code from here <a href="https://jsfiddle.net/Frizi/b5v4faqf/" rel="nofollow noreferrer">https://jsfiddle.net/Frizi/b5v4faqf/</a> but it still doesn't work :</p>
  <p><strong>Vue Component :</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template &gt;
        &lt;input v-model=&quot;$v.text.$model&quot; :class=&quot;status($v.text)&quot;&gt;
        &lt;!-- &lt;pre&gt;{{ $v }}&lt;/pre&gt; --&gt;
      &lt;/template&gt;
      
      &lt;script&gt;
      import { required, minLength, between } from 'vuelidate/lib/validators'
        export default {
           data() {
             return {
          text: ''
              }
             },
             validations: {
              text: {
              required,
              minLength: minLength(5)
            }
          },
          methods: {
              status(validation) {
              return {
                  error: validation.$error,
                dirty: validation.$dirty
              }
            }
          }
        }
      &lt;/script&gt;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    require('./bootstrap');
      
      window.Vue = require('vue');
      window.VueRouter = require('vue-router').default;
      window.VueAxios = require('vue-axios').default;
      window.Axios = require('axios').default;
      window.VueFormWizard = require('vue-form-wizard');
      window.Vuelidate = require('vuelidate').default;
      import 'vue-form-wizard/dist/vue-form-wizard.min.css';
  
      Vue.use(VueRouter,VueAxios,axios,VueFormWizard,Vuelidate);
  
      const ProductOptionCreate = Vue.component('po-create',require('./components/products/ProductOption_create.vue'));
      const ProgressModal = Vue.component('vue-modal',require('./components/ProgressModal.vue'));
      const ProductIndex = Vue.component('product-list',require('./components/products/Product_index.vue'));
      const productshow = Vue.component('productshow',require('./components/products/ProductOption_show.vue'));
      const ProductCreate = Vue.component('product-create',require('./components/products/Product_create.vue'));
      
  
      const app = new Vue({
        el:'#app',
      
      });
  </code></pre>
  <p>What's wrong with this code?</p>