Form: API Loaded data not passing to $form.[field].value

[magicMustard]

Describe the bug

I have an issue where I am attempting to populate the fields from an API. However, the data is not going through to the $form data object.

There is this bug here: #6755 - Not sure if it'll solve my issue, however, if it does, I'll wait till it's released.

So, essentially, in the onMounted, it is getting the data from the API and populating to the initialValues, however when this is done, it does not appear to be passing to the input fields.

If I add a v-model="initialValues.first_name", this kinda works. Where the data populates, but if you hit the submit button, it throws field errors saying it's required, because the value in the $form.first_name.value has not been populated.

Am I doing it incorrectly or is this an issue that might be resolved from this bug?

Here is my code (stripped out the non important parts):

<template>
	<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit">
		<AppField :label="t('profiles.firstName')" name="first_name" :fieldState="$form.first_name">
			<InputText name="first_name" />
		</AppField>
		<AppField :label="t('profiles.lastName')" name="last_name" :fieldState="$form.last_name">
			<InputText name="last_name" />
		</AppField>

		<AppSubmit :create="!id" />
	</Form>
</template>

<script setup lang="ts">

const props = defineProps<{
	id?: string;
}>()

// Initial values for the form
const initialValues = ref({
	first_name: '',
	last_name: ''
});

onMounted(async () => {
	if (props.id) {
		const { data, error } = await supabase.from('profiles').select('first_name, last_name').eq('id', props.id).single();

		if (error) {
			console.error('error', error);
			return;
		}

		initialValues.value = data;
	}
});
</script>

Reproducer

https://stackblitz.com/edit/wafqr9?file=src%2FApp.vue

PrimeVue version

4.2.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox 132.0.1 - Fedora

Steps to reproduce the behavior

1. Create a form with input fields
2. add the v-slot="$form" to the Form and add a InputText, or anything
3. Add the expected script data, you can use the stackblitz as an example https://stackblitz.com/edit/wafqr9?file=src%2FApp.vue
4. Add a timeout to populate some data after it's loaded
5. You'll notice the data is not loading into the form.

Expected behavior

It should populate the input fields with the data as you'd expect if you were to use v-model.