如何在组件的属性中反应性地设置vue-i18n

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default {
  data() {
    return {
      currentLanguage: 'en', // 默认语言为英文
    };
  },
};

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome', { name: 'John' }) }}</p>
  </div>
</template>

export default {
  methods: {
    changeLanguage(lang) {
      this.currentLanguage = lang;
      this.$i18n.locale = lang;
    },
  },
};

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import en from './locales/en.json';
import zh from './locales/zh.json';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言为英文
  messages: {
    en,
    zh,
  },
});

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount('#app');