How can i customize form error message from Yup/Vee-validate using Vue-i18n in Ionic VueJS

I would like to use vue-i18n to translate my form error messages.

I've code a "lang.ts" file which builds my i18n instance like this :

import { createI18n } from 'vue-i18n';
import french from './i18n/fr-FR.json';
import english from './i18n/en-US.json';

// push translations to list
const messages = {
    'en-US': french,
    'fr-FR': english
}

// Create VueI18n instance with options
export const i18n = createI18n({
    locale:"en-US",
    messages
});

and I initialize all of this in my "main.ts"

...
const app = createApp(App).use(router);

router.isReady().then(() => {
  Device.getLanguageCode().then(function (lang) {
    i18n.global.locale = lang.value; // changing locale using Capacitor locale getter
    app.use(i18n)
      .use(IonicVue)
    app.mount('#app');
  });
});

I'm using a yup custom schema to validate my form, and that's where i mention my custom error message, the problem is that my "global" locale value isn't being used in my schema and it always translates to default language (en-US here...)

here's my schema

export const LoginFormContentSchema = yup
  .object({
    login: yup.object({
      email: yup.string().email(i18n.global.t('wrongMail')).required(i18n.global.t('emptyMail')), // translating my error messages to current global locale 
      password: yup.string().required(i18n.global.t('emptyPassword')),
      url: yup
        .string()
        .required(i18n.global.t("urlEmpty")).lowercase()
        .matches(/^(https:\/\/)?[a-z0-9._-]+(\.fr)/),
    }),
  })
  .required();

Since i've changed my locale before mounting the app, i should have fr-FR as locale everywhere, but i'm getting "en-US" outputs when the error message pops out even thought my device is in French and my global.locale is fr-FR.