title: [Vue warn]: Property or method "$v" is not defined on the instance but referenced during render
body: <p>I use Vue.js for validation but it throws an error:</p>
  <blockquote>
  <p>vue.esm.js?a026:628 [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>
  </blockquote>
  <p>But I don't know how to handle it.</p>
  <p>Login.Vue:</p>
  <pre><code>&lt;template&gt;
  &lt;div id=&quot;login&quot;&gt;
    &lt;CContainer class=&quot;d-flex content-center min-vh-100&quot;&gt;
      &lt;CRow&gt;
        &lt;CCol&gt;
          &lt;CCardGroup&gt;
            &lt;CCard class=&quot;p-4&quot;&gt;
              &lt;CCardBody&gt;
                &lt;CForm&gt;
                  &lt;h1&gt;Login&lt;/h1&gt;
                  &lt;p class=&quot;text-muted&quot;&gt;Sign In to your account&lt;/p&gt;
                  &lt;CInput 
                    type=&quot;text&quot;
                    placeholder=&quot;Username&quot;
                    required
                    update:value=&quot;username&quot;
                    input:error-messages=&quot;usernameErrors&quot;
                    @input=&quot;$v.username.$touch()&quot;
                    @blur=&quot;$v.username.$touch()&quot;
                    required
                    autocomplete=&quot;username email&quot;
                  &gt;
                    &lt;template #prepend-content&gt;&lt;CIcon name=&quot;cil-user&quot;/&gt;&lt;/template&gt;
                  &lt;/CInput&gt;
                  &lt;CInput 
                    placeholder=&quot;Password&quot;
                    input:rules=&quot;passwordRules&quot;
                    type=&quot;password&quot;
                    required
                    iuodate:value=&quot;password&quot;
                    input=&quot;$v.password.$touch()&quot;
                    @blur=&quot;$v.password.$touch()&quot;
                    @input=&quot;$v.password.$touch()&quot;
                    autocomplete=&quot;current-password&quot;
  
                  &gt;
                    &lt;template #prepend-content&gt;&lt;CIcon name=&quot;cil-lock-locked&quot;/&gt;&lt;/template&gt;
                  &lt;/CInput&gt;
                  &lt;CRow&gt;
                    &lt;CCol col=&quot;6&quot; class=&quot;text-left&quot;&gt;
                      &lt;CButton color=&quot;primary&quot; class=&quot;px-4&quot; @click=&quot;direDisplay&quot;&gt;Login&lt;/CButton&gt;
                    &lt;/CCol&gt;
                    &lt;CCol col=&quot;6&quot; class=&quot;text-right&quot;&gt;
                      &lt;CButton color=&quot;link&quot; class=&quot;px-0&quot;&gt;Forgot password?&lt;/CButton&gt;
                      &lt;CButton color=&quot;link&quot; class=&quot;d-md-none&quot;&gt;Register now!&lt;/CButton&gt;
                    &lt;/CCol&gt;
                  &lt;/CRow&gt;
                &lt;/CForm&gt;
              &lt;/CCardBody&gt;
            &lt;/CCard&gt;
            &lt;CCard
              color=&quot;primary&quot;
              text-color=&quot;white&quot;
              class=&quot;text-center py-5 d-sm-down-none&quot;
              body-wrapper
            &gt;
              &lt;h2&gt;Sign up&lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
              &lt;CButton
                color=&quot;primary&quot;
                class=&quot;active mt-3&quot;
              &gt;
                Register Now!
              &lt;/CButton&gt;
            &lt;/CCard&gt;
          &lt;/CCardGroup&gt;
        &lt;/CCol&gt;
      &lt;/CRow&gt;
    &lt;/CContainer&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Dashboard from '../Dashboard.vue';
  import { required,minlength,username,password } from 'vuelidate/lib/validators'
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'Login',
   methods:{
            direDisplay(){
              
            //  console.log(this.id=this.$refs.groupid.value);
            //   console.log('pasword is ' +password);
              
              //this.$router.push('/Dashboard')
              if (this.data.username==='Abc' &amp;&amp; this.data.password==='Abc123@') {
                this.$router.push('/Dashboard') 
             } else {
                alert('password username cannot match');
              }
            }
          }
     }
  &lt;/script&gt;
  </code></pre>