best way to set useField value from props ?

[TheNullablePrototype]

What happened?

I don't understand how to set the value from props to useField. When trying to find out, I came across the maintainer's answer, where he recommends using resetField. When I try to do this, I always get a field that has not passed validation, even though the value in it is valid. Please tell me, what am I not doing wrong? How do I properly transfer props to components and validate their initial value after set useField?

Reproduction steps

stackblitz example

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/j45b1a?file=src%2Fcomponents%2FNameInput.vue

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[BenJackGill]

Did you figure this out? I have a similar issue.

[Sector6759]

@TheNullablePrototype @BenJackGill You need to move the useForm call above the useField call to establish a form context

This

const { handleSubmit } = useForm(...);

needs to happen before this

const { ... } = useField('name')

Then it should work like expected.

FYI: It might be better to split the form and input elements into 2 separate components like in this example.

Note: In the linked example, they use a generic InputText.vue component, so don't get confused by the name prop, where they use it as the name for the form field, whereas in your StackBlitz demo the name prop is used to pass in the value for the username.