Fix site contact form field bindings

app/components/sites/SiteContactFormFields.vue

@@ -5,7 +5,7 @@
         <span class="label-text">Nom du contact</span>
       </label>
       <input
-        v-model="form.contactName"
+        v-model="contactName"
         type="text"
         placeholder="Nom et prénom"
         class="input input-bordered"
@@ -13,14 +13,14 @@
       />
     </div>
 
-    <FieldPhone v-model="form.contactPhone" required />
+    <FieldPhone v-model="contactPhone" required />
 
     <div class="form-control">
       <label class="label">
         <span class="label-text">Adresse</span>
       </label>
       <input
-        v-model="form.contactAddress"
+        v-model="contactAddress"
         type="text"
         placeholder="Adresse complète"
         class="input input-bordered"
@@ -34,7 +34,7 @@
           <span class="label-text">Code postal</span>
         </label>
         <input
-          v-model="form.contactPostalCode"
+          v-model="contactPostalCode"
           type="text"
           placeholder="Code postal"
           class="input input-bordered"
@@ -47,7 +47,7 @@
           <span class="label-text">Ville</span>
         </label>
         <input
-          v-model="form.contactCity"
+          v-model="contactCity"
           type="text"
           placeholder="Ville"
           class="input input-bordered"
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { computed, toRef } from 'vue'
 import type { PropType } from 'vue'
 
 import FieldPhone from '~/components/form/FieldPhone.vue'
@@ -79,7 +79,42 @@ const props = defineProps({
   },
 })
 
-const form = toRefs(props.form)
+const form = toRef(props, 'form')
+
+const contactName = computed({
+  get: () => form.value.contactName,
+  set: (value: string) => {
+    form.value.contactName = value
+  },
+})
+
+const contactPhone = computed({
+  get: () => form.value.contactPhone,
+  set: (value: string) => {
+    form.value.contactPhone = value
+  },
+})
+
+const contactAddress = computed({
+  get: () => form.value.contactAddress,
+  set: (value: string) => {
+    form.value.contactAddress = value
+  },
+})
+
+const contactPostalCode = computed({
+  get: () => form.value.contactPostalCode,
+  set: (value: string) => {
+    form.value.contactPostalCode = value
+  },
+})
+
+const contactCity = computed({
+  get: () => form.value.contactCity,
+  set: (value: string) => {
+    form.value.contactCity = value
+  },
+})
 </script>
 
 <!--