default error message is always shown regardless of vue-i18n and custom messages

[lumos94]

@logaretm in my nuxt 3 application why doesn't the veevalidate apply the custom rules I set up inside the veevalidate plugin?
when i focus on the input field and leave focus without entering a value instead of getting the error message that the field is required I am getting a generic error message saying that the field is not valid. {field} is not valid.
This happens with my custom rules as well.
in my form i apply the rules like so:

const {
  value: firstNameValue,
  errorMessage: firstNameErrorMessage,
  handleBlur: firstNameHandleBlur,
  handleChange: firstNameHandleChange
} = useField('firstName', 'required|alpha_spaces', {
  label: customTrans.lead_form_first_name.value,
  validateOnValueUpdate: false
})

veevalidatesetup.client.ts

import {defineRule, configure} from 'vee-validate';
import {required, email, alpha_spaces, regex, numeric} from '@vee-validate/rules';
import {parsePhoneNumber} from 'awesome-phonenumber';
import {localize} from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import es from '@vee-validate/i18n/dist/locale/es.json';
import pt from '@vee-validate/i18n/dist/locale/pt_BR.json';
import vi from '@vee-validate/i18n/dist/locale/vi.json';

export default defineNuxtPlugin(() => {

    defineRule('required', required);
    defineRule('email', email);
    defineRule('alpha_spaces', alpha_spaces);
    defineRule('regex', regex);
    defineRule('numeric', numeric);
    defineRule('isValidPhoneNumber', (value: string, [countryISO]: [string]) => {
     //logic goes here
    });

    defineRule('phonePrefixContainsRequiredProperties', (value: any) => {
     //logic goes here
    });

    defineRule('ageEligibility', (value: string, [minAge]: [number]) => {
           //logic goes here
    })

//apply included error messages
    localize({
        en, es, vi, pt
    })

//custom error messages for custom rules
    configure({
        generateMessage: localize({
            en: {
                messages: {
                    isValidPhoneNumber: 'The {field} does not match with the countries phone format English',
                    phonePrefixContainsRequiredProperties: 'Phone Prefix details are wrong. Please try again',
                    ageEligibility: 'You must be 18+ to register.'
                },
            },
            es: {
                messages: {
                    isValidPhoneNumber: 'The {field} does not match with the countries phone format Spanish',
                    phonePrefixContainsRequiredProperties: 'Phone Prefix details are wrong. Please try again Spanish',
                    ageEligibility: 'You must be 18+ to register. Spanish'

                },
            },
            vi: {
                messages: {
                    isValidPhoneNumber: 'The {field} does not match with the countries phone format VN',
                    phonePrefixContainsRequiredProperties: 'Phone Prefix details are wrong. Please try again. VN',
                    ageEligibility: 'You must be 18+ to register. VN'

                },
            },
            pt: {
                messages: {
                    isValidPhoneNumber: 'The {field} does not match with the countries phone format PT',
                    phonePrefixContainsRequiredProperties: 'Phone Prefix details are wrong. Please try again PT',
                    ageEligibility: 'You must be 18+ to register. PT'

                },
            },
        }),
    });
});`

[lumos94]

I found the issue. I was setting the locale (setLocale) with the iso code (eg en-US) instead of just the language code (eg en)