What would be the best way to set the initial value of a useField if said value came from a component's props ? (vee-validate V4)

[ClaudiaLaplante]

I have a component that use the useField() API. I was wondering what was the right approach if I wanted to set its initial state with something that came from my component's props.

<template>
    <div>
        <q-input v-bind="attrs"
        v-model="field.value"
        outlined
        dense
        :error="!field.meta.valid && field.meta.dirty">
            <q-tooltip v-if="!field.meta.valid && field.meta.dirty">
            <ul>
            <li>
                {{ field.errorMessage.value }}
            </li>
            </ul>
            </q-tooltip>
        </q-input>
    </div>
</template>

<script setup>
import { useField } from 'vee-validate';
import { useAttrs } from 'vue';
    
const attrs = useAttrs();
const field = useField('field', 'required');
</script>


// Call from parent-component:
<my-component
    v-model="username"
    label="Username : "
    name="username"
/>

When I use my component this way, there is no value. What is the way set field value?

[logaretm]

You should use field.resetField and pass in the new value. That will set the initial value as well.

Check for examples here.