Quiero que reemplace automáticamente los mensajes de error de validación de vee con i18n y los mensajes en el paquete tr, pero cuando configuro setLocale, no se traduce. ¿Cómo puedo hacer esto?

Quiero usar paquetes de idioma en la localización en lugar de escribir traducciones para funciones requeridas u otras.

Lamento que pueda haber lugares mal escritos en mi código. mis codigos

 <template> <div class="TextInput" :class="{ 'has-error': !!errorMessage, success: meta.valid }" > <label :for="name">{{ label }}</label> <InputText :name="name" :type="type" :id="name" :value="inputValue" :placeholder="placeholder" @input="handleChange" @change="handleChangeModal" @blur="handleBlur" v-bind="$attrs" /> <p class="help-message" v-show="errorMessage || meta.valid"> {{ errorMessage || successMessage }} </p> </div> </template> <script> import { useField } from "vee-validate"; import { configure } from 'vee-validate'; import { localize,setLocale } from '@vee-validate/i18n'; import en from '@vee-validate/i18n/dist/locale/en.json'; import tr from '@vee-validate/i18n/dist/locale/tr.json'; export default { props: { type: { type: String, default: "text", }, modelValue:String, value: { type: String, default: "", }, name: { type: String, required: true, }, label: { type: String, required: true, }, successMessage: { type: String, default: "", }, placeholder: { type: String, default: "", }, }, emits: ['update:modelValue'], setup(props,{emit}) { const handleChangeModal = (event) =>{ emit('update:modelValue', event.target.value); } const { value:inputValue, errorMessage, handleBlur, handleChange, meta, } = useField(props.name, undefined, { initialValue: props.value, }); configure({ generateMessage: localize({ en, tr, }), }); setLocale('tr'); return { handleChange, handleBlur, errorMessage, meta, inputValue, handleChangeModal }; }, }; </script>