Error while using VueI18n plugin in vue - Cannot set property '_vm' of undefined

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.

Here are my code snippets

main.js

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 => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
        if (matched && matched.length > 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');

Here is my HelliI18n.vue file where I want to use translation

<template>
    hello
    <p></p>
</template>

<script>
    export default {
        name: 'HelloI18n'
    }
</script>

Following code is from my package.json file (for versions)

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-i18n": "^8.22.1",
    "vue-router": "^4.0.0-0"
},
"devDependencies": {
    "@intlify/vue-i18n-loader": "^1.0.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-cli-plugin-i18n": "~1.0.1"
},

When I run my project, I see following error on web console

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

Anything I'm doing wrong here ? any dependency I'm missing ? Any help would be really appreciated.

from Error while using VueI18n plugin in vue - Cannot set property '_vm' of undefined