vue组件中的国际化i18n在js中使用时未生效的处理

转自我的简书：https://www.jianshu.com/p/9e018002976e

在国际化i18n组件使用中，我们之前的用法有点错误，我总结一下哈：
在vue组件的中使用

<template>
    <div>
        <div class="page-header-title">{{$t("m.RegisterTitle[1]")}}</div>
    </div>
</template>

在template中可以直接这样用{{$t(“m.RegisterTitle[1]”)}}，没有问题，切换语言的时候，能够正常切换；
但是在JavaScript里面，这样用

data() {
    return {
        title: this.$t("m.RegisterTitle[2]"),
        tips: this.$t("m.ResetPasswordTips"),
        items: this.$t("m.InputItem"),
        next: this.$t("m.RouterTitle[2]"),
        close: this.$t("m.UpperIcon[0]"),
    }
}

就不行了，切换语言的时候，这里的内容不能够正常切换
需要使用

computed: {
        title: function () {
            return this.$t("m.RegisterTitle[2]");
        },
        tips: function () {
            return this.$t("m.ResetPasswordTips");
        },
        items: function () {
            return this.$t("m.InputItem");
        },
        next: function () {
            return this.$t("m.RouterTitle[2]");
        },
        close: function () {
            return this.$t("m.UpperIcon[0]");
        }
    }

computed 就像高级语言中的属性，有getter/setter方法，data 就像变量
以上仅个人愚见，如有错误地方，欢迎指正，谢谢