title: Vue i18n - can not dynamically change locale
body: <p>I have a small vue app where I want to implement the vue-i18n plug to make my app multilingual. I have installed the vue-i18n plugin from the vue cli. I have two locales and everything works as expected - whenever I manually change the locale from the.env file to the desired language, the language in the app also changes.However, whenever I try to change it with a button on the frontend I fail to do so.</p>
  <p>This is what I have in my i18n.js file:</p>
  <pre class="lang-js prettyprint-override"><code>import { createI18n } from 'vue-i18n'
  
  function loadLocaleMessages() {
    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
    const messages = {};
    locales.keys().forEach(key =&gt; {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i);
      if (matched &amp;&amp; matched.length &gt; 1) {
        const locale = matched[1];
        messages[locale] = locales(key);
      }
    })
    return messages;
  }
  
  export default createI18n({
    legacy: false,
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: loadLocaleMessages()
  })
  </code></pre>
  <p>This is in .env file:</p>
  <pre><code>VUE_APP_I18N_LOCALE=en
  VUE_APP_I18N_FALLBACK_LOCALE=en
  </code></pre>
  <p>This is code from a tutorial I saw and they access the locale by this.$i18n.locale, however, this does not work for me, this is how I try to implement it:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;hello&quot;&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;h2&gt;{{ t(&quot;hello&quot;) }}&lt;/h2&gt;
      &lt;h2&gt;{{ t(&quot;message&quot;) }}&lt;/h2&gt;
      &lt;button @click=&quot;SetLocale('en')&quot;&gt;EN&lt;/button&gt;
      &lt;button @click=&quot;SetLocale('nl')&quot;&gt;NL&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
      
  &lt;script&gt;
  import { useI18n } from &quot;vue-i18n&quot;;
  export default {
    name: &quot;HelloWorld&quot;,
    setup() {
      const { t } = useI18n({
        inheritLocale: true,
        useScope: &quot;local&quot;,
      });
  
      // Something todo ..
  
      return {
        t
      };
    },
    methods: {
      SetLocale(locale) {
        console.log(locale);
        this.$i18n.locale = locale;
      },
    },
  };
  &lt;/script&gt;
      
  &lt;i18n&gt;
  {
    &quot;en&quot;: {
      &quot;hello&quot;: &quot;Hello i18n in English! (from component)&quot;,
    },
    &quot;nl&quot;: {
      &quot;hello&quot;: &quot;Hello i18n in Dutch! (from component)&quot;,
    }
  }
  &lt;/i18n&gt;
  </code></pre>
  <p>The error that I get when I click the button is:</p>
  <blockquote>
  <p>[Vue warn]: Unhandled error during execution of native event handler</p>
  <p>Uncaught TypeError: Cannot set properties of undefined (setting
  'locale')</p>
  </blockquote>
  <p>I have tried some other solutions like i18n.locale and this.$root.$i18n.locale but they dont seem to work either.</p>
  <p>In addition when I try to access the <h2>{{ t(&quot;message&quot;) }}</h2> from which message comes from a JSON file from locales folder I get those warnings:</p>
  <blockquote>
  <p>[intlify] Not found 'message' key in 'nl' locale messages.</p>
  <p>[intlify] Fall back to translate 'message' key with 'en' locale</p>
  <p>[intlify] Not found 'message' key in 'en' locale messages.</p>
  <p>[intlify] Fall back to translate 'message' key with 'nl' locale</p>
  </blockquote>
  <p>My question is, where am I doing something wrong and is there a way to get rid of the warnings that I have when I try to access the JSON files from the locales folder?</p>