vue-i18n无法转换键路径的值。使用keypath的值作为默认值

Question

我有此错误，我不知道keypath的值是什么。我已经尝试导入邮件数组并在data()和i18n locale中进行了定义，但这没有用。

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';

const i18n = new VueI18n({
    locale: 'en',
    messages
});

new Vue({
    el: '#app',
    router,
    i18n,
    render: h => h(App)
});

Main.vue

<template>
<div class="col-md-6 col-12 text-white">
    <h2>new h2</h2>
    <p>{{ $t('welcomeMsg') }}</p>
</div>
</template>
<script>
    export default {};
</script>

i18n.js

const messages = {
    "en": {welcomeMsg: 'Welcome to EN'},
    "es": {welcomeMsg: 'Welcome to ES'}
};

Navbar.vue

<template>
    <a v-on:click="changeLocale('es')">EN</a>
</template>

<script>

    export default {
        methods: {
            changeLocale: function(locale) {
                if(locale == "en"){
                    this.$i18n.locale = "es";
                }else{
                    this.$i18n.locale = "en";
                }
            }
        }
    };
</script>