title: Vue.js 3 - Error while using Vue I18n plugin in vue - Cannot set property '_vm' of undefined
body: <p>I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console.</p>
  <p>Here are my code snippets</p>
  <p><strong>main.js</strong></p>
  <pre><code>import { createApp } from 'vue';
  import App from './App.vue';
  import VueI18n from 'vue-i18n'
  import router from './router/index'
  
  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
  }
  
  const i18n = VueI18n({
      locale: process.env.VUE_APP_I18N_LOCALE || 'en',
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
      messages: loadLocaleMessages()
  })
  
  
  const app = createApp(App);
  app.use(router);
  app.use(i18n);
  app.mount('#app');
  </code></pre>
  <p>Here is my <strong>HelliI18n.vue</strong> file where I want to use translation</p>
  <pre><code>&lt;template&gt;
      hello
      &lt;p&gt;{{ $t('hello') }}&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'HelloI18n'
      }
  &lt;/script&gt;
  </code></pre>
  <p>Following code is from my <strong>package.json</strong> file (for versions)</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;vue&quot;: &quot;^3.0.0&quot;,
      &quot;vue-i18n&quot;: &quot;^8.22.1&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-0&quot;
  },
  &quot;devDependencies&quot;: {
      &quot;@intlify/vue-i18n-loader&quot;: &quot;^1.0.0&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.0.0-0&quot;,
      &quot;vue-cli-plugin-i18n&quot;: &quot;~1.0.1&quot;
  },
  </code></pre>
  <p>When I run my project, I see following <strong>error</strong> on web console</p>
  <pre><code>Uncaught TypeError: Cannot set property '_vm' of undefined
  at VueI18n (vue-i18n.esm.js?a925:1173)
  at eval (main.js?56d7:19)
  at Module../src/main.js (app.js:1167)
  at __webpack_require__ (app.js:854)
  at fn (app.js:151)
  at Object.1 (app.js:1228)
  at __webpack_require__ (app.js:854)
  at checkDeferredModules (app.js:46)
  at app.js:994
  at app.js:997
  </code></pre>
  <p>Anything I'm doing wrong here ? any dependency I'm missing ? Any help would be really appreciated.</p>