Изменение локали I18n не работает для Vee-Validate - VueJS

Ну, я не говорю, что ваша конфигурация неверна. Я просто поделюсь своим, который отлично работает.

1- vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },
};

2- i18n.ts

import Vue from 'vue';
import VueI18n, { LocaleMessages } from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages(): LocaleMessages {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});

3- main.ts

import Vue from 'vue';

import './registerServiceWorker';
import { sync } from 'vuex-router-sync';
import VueLodash from 'vue-lodash';
import Storage from 'vue-ls';
import vuetify from './plugins/vuetify';
import './utils/vee-validate';


// Components
import './components';

// Application imports
import App from './App.vue';
import router from '@/router';
import store from '@/store';
import i18n from './i18n';

// Sync store with router
sync(store, router);
const options = {
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
Vue.config.productionTip = false;
Vue.use(VueLodash, { name: 'lodash' });
new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App),
}).$mount('#app');

4- src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify/lib';


// import VueI18n from 'vue-i18n';
// import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';


Vue.use(Vuetify);


export default new Vuetify({
  lang: {
    locales: { en, jp },
    current: 'jp',
  },
});

5-src/utils/vee-validate.js

/* eslint-disable no-underscore-dangle */
import { extend } from 'vee-validate';
import { required, email, confirmed } from 'vee-validate/dist/rules';
import i18n from '@/i18n';


extend('required', {
  ...required,
  message: (_, values) => i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED', values),
});

extend('email', {
  ...email,
  message: (_, values) => i18n.t('LOGIN_FORM_EMAIL_VALID_MESSAGE', values),
});
extend('confirmed', {
  ...confirmed,
  message: (_, values) => i18n.t('CHANGE_PASSWORD_FORM_CONFIRMATION_VALID_MESSAGE', values),
});

6- Я использую vuex из своего языкового магазина

import Vue from 'vue';
import { localize } from 'vee-validate';
import Vuetify from 'vuetify/lib';
import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

...

const mutations = {
  SET_LANG(state, data) {
    state.lang = data;
    i18n.locale = data;
    localize(data, jp);
  },
  SET_LANG_ERROR() {
    window.$messageGlobal('Error switching languages');
  },
};

Надеюсь, поможет