fix(#9): Return deep reactive objects in useAsyncData to make form reactive again

legalconsenthub/app/composables/useApplicationFormNavigation.ts

@@ -5,7 +5,8 @@ export async function useApplicationFormNavigation(applicationFormId: string) {
 
   const { data, error, refresh } = await useAsyncData<ApplicationFormDto>(
     `application-form-${applicationFormId}`,
-    async () => await getApplicationFormById(applicationFormId)
+    async () => await getApplicationFormById(applicationFormId),
+    { deep: true }
   )
 
   if (error.value) {
@@ -62,4 +63,3 @@ export async function useApplicationFormNavigation(applicationFormId: string) {
     error
   }
 }
-

legalconsenthub/app/pages/create.vue

@@ -85,9 +85,13 @@ const userStore = useUserStore()
 const { selectedOrganization } = storeToRefs(userStore)
 const toast = useToast()
 
-const { data, error } = await useAsyncData<PagedApplicationFormDto>('create-application-form', async () => {
-  return await getAllApplicationFormTemplates()
-})
+const { data, error } = await useAsyncData<PagedApplicationFormDto>(
+  'create-application-form',
+  async () => {
+    return await getAllApplicationFormTemplates()
+  },
+  { deep: true }
+)
 
 if (error.value) {
   throw createError({ statusText: error.value.message })