title: vue-i18n Cannot translate the value of keypath. Use the value of keypath as default
body: <p>I have this error and I dont know what is the value of keypath. I already tried to import messages array and defined in the <code>data()</code> the <code>i18n locale</code>, but it didn't work.</p>
  
  <p><strong>main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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 =&gt; h(App)
  });
  </code></pre>
  
  <p><strong>Main.vue</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div class="col-md-6 col-12 text-white"&gt;
      &lt;h2&gt;new h2&lt;/h2&gt;
      &lt;p&gt;{{ $t('welcomeMsg') }}&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {};
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>i18n.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const messages = {
      "en": {welcomeMsg: 'Welcome to EN'},
      "es": {welcomeMsg: 'Welcome to ES'}
  };
  </code></pre>
  
  <p><strong>Navbar.vue</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;a v-on:click="changeLocale('es')"&gt;EN&lt;/a&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
          methods: {
              changeLocale: function(locale) {
                  if(locale == "en"){
                      this.$i18n.locale = "es";
                  }else{
                      this.$i18n.locale = "en";
                  }
              }
          }
      };
  &lt;/script&gt;
  </code></pre>