Vue vuelidate $v is not defined - vue.js

Question

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