Vue 3 Reusefull code how show a specific error in a custom component

Solution for Vue 3 Reusefull code how show a specific error in a custom component
is Given Below:

I follow a tutorial to made custom component on Vue 3 to build a form. I modified the TxtFiel componento to use the same component with diferents placeholders.

For example:

<TxtField placeholder="Hotel" v-model="user.hotel" />
<TxtField placeholder="Nombre" v-model="user.nombre" />
<TxtField placeholder="Apellido" v-model="user.apellido" />

inside the component i have a div with v-if directive

<div class="errorMsn" 
     v-if="errors.name">
      {{errors.name}}
</div>

But the issue came when i validate the errors message with v-if directive i saw that the error showed in the other component with dif. placeholders.

“TxtField.vue”

<template>
    <div class="form-floating component">
        <input type="text"
        class="form-control form-control-sm border border-primary"
        :id="placeholder"
        :placeholder="placeholder"
        autocomplete="off"
        v-model="input"
        @keyup="validateInput"
        @blue="validateInput"
        @input="$emit('update:modelValue', $event.target.value)">
        <label :for="placeholder">{{placeholder}}:</label>
    </div>
    <div class="errorMsn" 
         v-if="errors.name">
        {{errors.name}}
    </div>
    
</template>

 <script>
 import { ref } from "vue";
 import useFormValidation from "../js/useFormValidation.js";
 
 export default {
     props:{
         placeholder:{
             type:String,
             required:true,
         },
         modelValue: String,
     },
    emits:['update:modelValue'],
    setup(props) {
        let input = ref("");
        const {validateNameField, errors } = useFormValidation();
        const validateInput = () =>{
            validateNameField("name", input.value, props.placeholder);
            console.log(errors);
        };
        return {input, errors, validateInput};
    },
};
</script>