(V4) Trouble validating Vuetify 3 v-autocomplete using list of objects

[sbrownre]

Hi,

I'm attempting to validate a form which contains a vuetify 3 v-autocomplete component. The component is populated using a list of objects containing a number of attributes and setting 'item-title' and 'item-value' on the v-autocomplete to display the correct display name.

The issue comes that when I wrap the v-autocomplete in a Field component and use 'v-bind="field' on the v-autocomplete, I see some very strange behavior where when the autocomplete is focused it displays the value and when it is un-focused it shows the display name. The field will also not validate using the 'required' global validator even if an item is selected.

I have created a StackBlitz example to show the issue. It uses the options API based on an example provided in another discussion as I am not ready to migrate my application to the composition API yet.

If you're able to provide any advice on how to validate this component in a form I would greatly appreciate it. Thanks!