Access to vue-i18n assets is not available within a Vue component method when called via a Promise

vue & vue-i18n version

vue v2.3.4 vue-i18n v7.0.3 Using with Laravel 5.4, and bundling assets with Webpack via Laravel Mix.

Reproduction Link

(Pending, will update post upon completion.)

Steps to reproduce

• Prepare a Vue component, with Vue-i18n included as an asset on the top-level Vue instance
• Prepare a Vue component, which includes a Vue method that accesses this.$t or this.$tc within the method. The method should not be defined using ES6 arrow notation so that the ‘this’ context is the Vue instance.
• Call the method as the response or error method from a JS Promise

What is Expected?

Access to this.$t is provided via the ‘this’ binding solution provided by Vue

What is actually happening?

vue-i18n is not available (VueComponent property ‘_i18n’ is null). Other Vue instance properties are available in this context, such as this.$store when using vuex, as well as all component data, props and computed properties via ‘this’. An attempt to access this.$t generates an error: TypeError: Cannot read property '_t' of null Error is generated here, though the source cause is external of this: https://github.com/kazupon/vue-i18n/blob/9ef7b798e3c1d58dfae4f25e5e6b8c488b86d819/dist/vue-i18n.js#L111

[hunterliu1003]

I having the same issue, use this.$root.$t() in promise works for me

[AlexandreBonaventure]

Can we reopen this ? I experienced the same error when using $t('xxx') inside a watcher callback. version: vue-i18n@7.4.2

As a workaround I stored the value outside the callback…