Default Values handling VUE form

const defaultValues = computed(() => ({ rocketType: { value: device.value?.data.brand.id || '', label: device.value?.data.brand.name || '' }, launchModel: { value: device.value?.data.model.id || '', label: device.value?.data.model.name || '' }, orbitZone: { value: timezone.value || null, label: timezone.value || null }, pilotProfile: { value: userStore.organization.id || organization.value?.data.id || '', label: userStore.organization.name || organization.value?.data.name || '', enabled: userStore.organization.enabled || organization.value?.data.enabled || null, }, cargoBay: { value: userStore.merchant.id || merchant.value?.data.id || '', label: userStore.merchant.name || merchant.value?.data.name || '', enabled: userStore.merchant.enabled || merchant.value?.data.enabled || '', }, dockingStation: { value: store.value?.data.id || '', label: store.value?.data.name || '', enabled: store.value?.data.enabled || '' }, hullCode: device.value?.data.serialNumber || '', ignitionWindowStart: getLicenseDatePickerModelValue(iLicenseStartDate.value, timezone.value as Timezones), ignitionWindowEnd: getLicenseDatePickerModelValue(iLicenseEndDate.value, timezone.value as Timezones), })); const form = useForm({ defaultValues, onSubmit: async ({ value }) => { // Do something with form data console.log(value) }, }) can I use the above default values inside useForm hook in @tanstack/vue-form? The documentation provides a completely different example, where all fields are calculated separately and then grouped together inside a reactive variable. My question is: my default values contain nested fields (e.g., pilotProfile, launchModel, etc.). How can I handle nested form fields in @tanstack/vue-form? Do I need to calculate all form fields separately and group them in a reactive variable, or can I directly use a computed value for defaultValues in useForm?