fixes

pages/signup.vue

@@ -27,7 +27,8 @@
                 <v-row>
                   <v-col cols="12" sm="6">
                     <v-text-field
-                      v-model="form.first_name"
+                      v-model="firstName"
+                      :key="'first-name-field'"
                       name="firstName"
                       autocomplete="given-name"
                       label="First Name"
@@ -36,12 +37,12 @@
                       variant="outlined"
                       :disabled="loading"
                       required
-
                     />
                   </v-col>
                   <v-col cols="12" sm="6">
                     <v-text-field
-                      v-model="form.last_name"
+                      v-model="lastName"
+                      :key="'last-name-field'"
                       name="lastName"
                       autocomplete="family-name"
                       label="Last Name"
@@ -49,13 +50,13 @@
                       variant="outlined"
                       :disabled="loading"
                       required
-
                     />
                   </v-col>
                 </v-row>
 
                 <v-text-field
-                  v-model="form.email"
+                  v-model="email"
+                  :key="'email-field'"
                   name="email"
                   autocomplete="email"
                   label="Email Address"
@@ -65,11 +66,11 @@
                   variant="outlined"
                   :disabled="loading"
                   required
-
                 />
 
                 <PhoneInputWrapper 
-                  v-model="form.phone"
+                  v-model="phone"
+                  :key="'phone-field'"
                   label="Phone Number"
                   :rules="phoneRules"
                   :disabled="loading"
@@ -77,7 +78,8 @@
                 />
 
                 <v-text-field
-                  v-model="form.date_of_birth"
+                  v-model="dateOfBirth"
+                  :key="'dob-field'"
                   label="Date of Birth"
                   type="date"
                   :rules="dobRules"
@@ -88,7 +90,8 @@
                 />
 
                 <v-textarea
-                  v-model="form.address"
+                  v-model="address"
+                  :key="'address-field'"
                   name="address"
                   autocomplete="street-address"
                   label="Address"
@@ -98,11 +101,11 @@
                   rows="3"
                   :disabled="loading"
                   required
-
                 />
 
                 <MultipleNationalityInput 
-                  v-model="form.nationality"
+                  v-model="nationality"
+                  :key="'nationality-field'"
                   label="Nationality"
                   :rules="nationalityRules"
                   :disabled="loading"
@@ -242,16 +245,25 @@ useHead({
   ]
 });
 
-// Reactive data
-const form = ref<Omit<RegistrationFormData, 'recaptcha_token'>>({
-  first_name: '',
-  last_name: '',
-  email: '',
-  phone: '',
-  date_of_birth: '',
-  address: '',
-  nationality: ''
-});
+// Reactive data - Using individual refs to prevent Vue reactivity corruption
+const firstName = ref('');
+const lastName = ref('');
+const email = ref('');
+const phone = ref('');
+const dateOfBirth = ref('');
+const address = ref('');
+const nationality = ref('');
+
+// Computed property to create form object for submission
+const form = computed(() => ({
+  first_name: firstName.value,
+  last_name: lastName.value,
+  email: email.value,
+  phone: phone.value,
+  date_of_birth: dateOfBirth.value,
+  address: address.value,
+  nationality: nationality.value
+}));
 
 const valid = ref(false);
 const loading = ref(false);
@@ -346,16 +358,14 @@ async function submitRegistration() {
 
     if (response?.success) {
       successMessage.value = response.message || 'Registration successful!';
-      // Reset form
-      form.value = {
-        first_name: '',
-        last_name: '',
-        email: '',
-        phone: '',
-        date_of_birth: '',
-        address: '',
-        nationality: ''
-      };
+      // Reset form by resetting individual refs
+      firstName.value = '';
+      lastName.value = '';
+      email.value = '';
+      phone.value = '';
+      dateOfBirth.value = '';
+      address.value = '';
+      nationality.value = '';
       recaptchaToken.value = '';
       // Reset reCAPTCHA
       recaptcha.value?.reset();