ajuste nome e sobrenome para validar form com 3 caracteres

app/pages/index.vue

@@ -216,8 +216,10 @@
                       type="text"
                       placeholder="Seu nome"
                       class="field-input"
+                      @blur="onNameBlur('nome')"
                     >
                   </div>
+                  <span v-if="errors.nome" class="field-error-text">{{ errors.nome }}</span>
                 </div>
 
                 <div class="field-group">
@@ -229,8 +231,10 @@
                       type="text"
                       placeholder="Seu sobrenome"
                       class="field-input"
+                      @blur="onNameBlur('sobrenome')"
                     >
                   </div>
+                  <span v-if="errors.sobrenome" class="field-error-text">{{ errors.sobrenome }}</span>
                 </div>
 
                 <div class="field-group">
@@ -475,8 +479,8 @@ const clearErrors = () => {
 }
 
 const validateRequired = (): boolean => {
-  errors.nome         = form.nome.trim() ? '' : 'Campo obrigatório'
-  errors.sobrenome    = form.sobrenome.trim() ? '' : 'Campo obrigatório'
+  errors.nome         = form.nome.trim() ? errors.nome : 'Campo obrigatório'
+  errors.sobrenome    = form.sobrenome.trim() ? errors.sobrenome : 'Campo obrigatório'
   errors.cracha       = form.cracha.trim() ? '' : 'Campo obrigatório'
   errors.cargoId      = form.cargoId ? '' : 'Campo obrigatório'
   errors.setorId      = form.setorId ? '' : 'Campo obrigatório'
@@ -497,6 +501,11 @@ const handlePhone = (e: Event) => {
   if (errors.telefone) errors.telefone = ''
 }
 
+const onNameBlur = (field: 'nome' | 'sobrenome') => {
+  const value = form[field].trim()
+  errors[field] = value && value.length < 3 ? 'Mínimo de 3 caracteres' : ''
+}
+
 const onCPFBlur = () => {
   errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
 }
@@ -538,6 +547,8 @@ const resetForm = () => {
 }
 
 const handleSubmit = async () => {
+  onNameBlur('nome')
+  onNameBlur('sobrenome')
   errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
   errors.email = form.email && !validateEmail(form.email) ? 'E-mail inválido' : ''
   errors.telefone = form.telefone && form.telefone.replace(/\D/g, '').length < 10 ? 'Telefone inválido' : ''
@@ -713,6 +724,11 @@ onMounted(() => {
 .field-input-wrap.field-error {
   border-color: #dc2626;
 }
+.field-error-text {
+  font-family: "Nunito", sans-serif;
+  font-size: 0.75rem;
+  color: #dc2626;
+}
 .field-icon {
   font-size: 1.125rem;
   color: #b6b6b6;