Missing `meta` properties for each field individually when declaring a field using `defineField` from a `useForm`

[TotomInc]

What happened?

Using the defineField() composable function returned by a useForm(), I am not able to find meta properties for each individual field declared in the form.

With useField(), it is possible to access meta properties of the current field thanks to:

const firstname = useField("firstname");
console.log(firstname.meta.valid);

However, I am not able to find a similar API when using defineField(), except with form.isFieldValid("firstname") which causes me to create a computed() for each of my fields.

I've created a CodeSandbox with 2 components to compare useField & defineField approaches.

In the end, it may be useful to create a small convenience API so we can get the meta of each fields inside a useForm like this:

const form = useForm<FormType>({ /* ... */ });

// API convenience proposal:
console.log(form.meta.fields["my-field"].valid);

Reproduction steps

No response

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

https://codesandbox.io/p/devbox/epic-haze-hpz6vk

Code of Conduct

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

[logaretm]

defineField is not meant to be used as a store, this is more of useField job.

However there is a workaround, roughly along these lines:

const [model, props] = defineField('field', (state) => {
  return {
    props: {
      // expose stuff from state here
      touched: state.touched,
    }
  };
});

// Access props
props.value.touched;