title: Vue i18n TypeError: Cannot read property '_t' of undefined
body: <p>I try to use <code>vue-i18n</code> in <code>ts</code> file of a component like this:</p>
  <pre><code>export default class MyComponent extends Vue {
    readonly i18nTitle = this.$t('translation.key');
  
    //...
  }
  </code></pre>
  <p>But I get the error:</p>
  <blockquote>
  <p>TypeError: Cannot read property '_t' of undefined stackoverflow</p>
  </blockquote>
  <p>This error only occurs when I try to use <code>i18n</code> in the <code>ts</code> file but it works fine when I use it in the <code>html</code>.</p>
  <p>My configuration of <code>i18n</code> is really basic:</p>
  <pre><code>// i18n/index.ts
  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  import fr from './translations/fr.json';
  
  Vue.use(VueI18n);
  
  export const i18n = new VueI18n({
    locale: 'fr',
    fallbackLocale: 'fr',
    messages: {
      fr,
    },
  });
  
  // maint.ts
  import { i18n } from './i18n';
  
  new Vue({
    el: '#app',
    i18n,
    components: { App },
    template: '&lt;App/&gt;',
  });
  </code></pre>
  <p>Any idea what I am missing?</p>