vee-validate 4.7 | VueJS 3 | Single input field validate - vuejs3

Question

I am using VueJS 3 and want to validate my step by step screen with single OR multiple input fields and want to check is he field valid or not and based on that I have to enable next button.
For validation I am using vee-validate plugin 4.7.3.
In my case I also do not want to use the form tag if possible. As my field is independent so no need to use form.
But as I search and read the comments of the package owner and mentioned that need to use Form so I used it but I just want to check the field validation as I have to show/hide the next button.
Component.vue
<template>
<Form :validateOnModelUpdate="true">
<Field name="mobile" as="input" :rules="mobileRules" v-model="mobile" />
</Form>
// Want to display button if the validation match
// Out side of the form
<button class="btn btn-default" v-if="IF_VALID" > Next </button>
</template>
<script>
import * as Yup from 'yup';
export default {
data(){
return {
mobile: '',
mobileRules: Yup.string().required().min(6)
}
}
}
</script>
If is there anyway to access the meta of the Field then may be that will be helped me.
Thanks.
I have tried to user UseField/useIsFieldValid but it shows me error that the
field with name mobile was not found
Also tried to use ref on the field but I can't able to access the meta of the Field

Answer 1

I have fixed it by using following code change:
For the field level validation need to code like this.
You can access field meta data in your component anywhere out of the Form
As per the owner comment if need to access this type of data out of the component need to achieve like this.
Owner Comment on Discussion
<template>
<div>
<form > <!-- This is simple HTML form -->
<input class="form-control" type="text" name="mobile" v-model="mobile" placeholder="000-0000-000">
<span class="text-danger" v-if="mobileErr">{{ mobileErr }}</span>
</form>
<button v-if="mobileMeta.valid"> Next </button>
</div>
</template>
<script>
import * as Yup from 'yup';
import { useField } from 'vee-validate';
export default {
setup(){
const mobileRules = Yup.string().required('Required').min(10, 'Must be 10 digits');
const { meta: mobileMeta, value: mobile, errorMessage: mobileErr} = useField('mobile', mobileRules);
return {
mobileMeta,
mobile,
mobileErr
}
},
data(){
return {
steps: '',
loading: false
}
},
created(){
},
methods:{
methodOne () {
// Some code to perform
},
methodTwo () {
// Some code to perform
}
}
}
</script>
Hopefully it will helps to others who want to perform step by step form and need to valid the field one by one.
Thanks.