vue-i18nで多言語対応をする際に"i18n.tc('message.hello')"で値は取得できるが{{$t('message.hello')}}が使用できない

Question

お世話になっております。
下記のソースがあります。
console.log(i18n.tc('message.hello'))
の箇所は「こんにちは、世界」がコンソールに出力されるのですが
{{$t('message.hello')}}
の箇所にはエラーメッセージ"Cannot read property '_t' of undefined"
が出力されます。
なにか設定が足りないのでしょうか？
おわかりになる方いらっしゃいましたらよろしくお願いします

/components/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

Vue.use(VueI18n);

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

index.vue

<div>
{{$t('message.hello')}}
</div>
<script>
import {i18n} from '~/components/i18n.js'
export default {
  methods: {
    init() {
      console.log(i18n.tc('message.hello'))
    }
  }
}
</script>

Answer 1

下記の"i18n"の1行を追加で解決しました

export default{
i18n,
・
・
・
}