How to use variables in Vue template?

Question

Vue.js

I want to use i18n
https://github.com/Haixing-Hu/vue-i18n
I wrote in main.js file

var Vue = require('vue');
var i18n = require('vue-i18n');

Vue.use(i18n, {
  baseUrl: 'resources/i18n'
});

new Vue({
  el: '#test-i18n',
  beforeCompile: function() {
    this.$setLanguage("zh-CN");
  },
  methods: {
    switchLanguage: function(lang) {
      this.$setLanguage(lang);
    }
  }
});

I am trying to use variables in template files

<div id="test-i18n" class="message">
  <p>Language: {{$language}}</p>
  <p>{{$i18n.message.hello}}, {{$i18n.message.world}}</p>
</div>

As a result, this does not work, when building in the browser console it says
Property or method "$language" is not defined on the instance but referenced during render. Make sure...
Property or method "i18n" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property...
How do I make the template see these variables?

Answer 1

beforeCompile:

Here's how? What version of vue are you using? Isn't it the second one by any chance? If so, then...
Well, in general - it's pretty brave to try to use a plugin that has not been updated for three years. There is an opinion that you should find something fresher.

Answer 2

I think the problem is the version mismatch between Vue and the plugin https://github.com/Haixing-Hu/vue-i18n.
There are more recent packages for internationalization, such as https://kazupon.github.io/vue-i18n/ .