useField object structure

[tjuambita]

What happened?

Not sure if I am using the types here correctly, but I have encountered an issue when upgrading vee-validate.

I am using the useField() name property in my dynamic ID in the template, and it requires me to put .value at the end of it to extract the string value.

Template:

<SomeComponent :id="`${inputField.name.value}`" ... />

Script:

const inputField = useField('validation rules')

The error:
Property 'value' does not exist on type 'MaybeRef<string>'. Did you mean 'valueOf'? Property 'value' does not exist on type 'string'.ts(2551)

The object structure of my useField:

{
... 
name: ComputedRefImpl {
...
value: 'the string I need'
},
value: ComputedRefImpl {dep: undefined, __v_isRef: true, __v_isReadonly: false, getter: ƒ, _setter: ƒ, …}
...
}

Reproduction steps

...

Version

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

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

NA

Code of Conduct

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

[logaretm]

Wrap it with reactive().

https://vee-validate.logaretm.com/v4/guide/composition-api/caveats#destructing-composable