perf(Register): muestro en el formulario los errores personalizados

src/views/Register.vue

@@ -3,6 +3,12 @@
         <div class="form-signin w-100 p-5 shadow rounded bg-white form-card">
             <h2 class="mb-4 text-center">Registrarse</h2>
             
+            <div v-if="errorMsgs.length > 0" class="alert alert-danger" role="alert">
+                <ul>
+                    <li v-for="msg in errorMsgs" :key="msg">{{ msg }}</li>
+                </ul>
+            </div>
+
             <form @submit.prevent="handleRegister">
                 <div class="form-floating mb-4">
                     <input 
@@ -79,10 +85,10 @@ const name = ref('');
 const surname = ref('');
 const email = ref('');
 const password = ref('');
-const errorMsg = ref('');
+const errorMsgs = ref([]);
 
 async function handleRegister() {
-    errorMsg.value = '';
+    errorMsgs.value = [];
     try {
         await authStore.register({ 
             name: name.value, 
@@ -92,7 +98,13 @@ async function handleRegister() {
         });
         router.push('/recipes');
     } catch (error) {
-        errorMsg.value = error.message;
+        // Verifica que la respuesta de error existe y tiene el mensaje
+        if (error.response && error.response.data && error.response.data.errorMsg) {
+            // Divide la cadena de mensajes y la asigna al array
+            errorMsgs.value = error.response.data.errorMsg.split('; ');
+        } else {
+            errorMsgs.value = ['Ocurrió un error inesperado. Inténtalo de nuevo.'];
+        }
     }
 }
 </script>