JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

JavaScript

// app.js
// Created at 03/09/2021

var en = {
	language: 'en',
  addATag: "Add a tag",
  thisIsHome: "This is Home",
  thisIsFoo: "This is Foo",
  thisIsBar: "This is Bar",
  namedRoutes: "Named Routes",
  currentRouteName: "Current route name",
  home: "Home",
  bar: "Bar",
  foo: "Foo",
  youClickedMe: "you clicked me",
  ci: "times",
}

var zh = {
	language: 'zh',
  addATag: "添加一个标签",
  thisIsHome: "这是首页",
  thisIsFoo: "这是Foo页",
  thisIsBar: "这是Bar页",
  namedRoutes: "路由名称",
  currentRouteName: "当前路由名称",
  home: "首页",
  bar: "Bar页",
  foo: "Foo页",
  youClickedMe: "你点击了",
  ci: "次",
}

const Home = {
	data: function() { return { text: ""} },
  methods: {
  	onChanged() {
    	console.log(this.text)
    }
  },
  template: '<div>{{ i18n.thisIsHome }}: <input  v-on:keyup="onChanged" v-model="text" /></div>' 
}
const Bar = { props: ['id', "from"], template: '<div>{{ i18n.thisIsBar }}: {{ id }}, {{ from }}</div>' }
const Foo = { template: '<div>{{ i18n.thisIsFoo }}</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/bar/:id', name: 'bar', component: Bar, props: true },
    { path: '/foo', name: 'foo', component: Foo }
  ]
})

const i18n = Vue.observable({
	...en,
})

const plugin = {
  install: function (Vue, options) {
    Vue.prototype.i18n = i18n
  }
}

Vue.use(plugin)

new Vue({
  data: {},
  router,
  template: `
  <div id="app">
    <p>{{ i18n.currentRouteName }}: {{ i18n[$route.name] }}({{ $route.name }})</p>
    <button v-on:click="onBack">Back</button>
    <button v-on:click="onToggle">i18n</button>
    <button v-on:click="onToBar">To Bar</button>
    <div>
      <router-link to="/">{{ i18n.home }}</router-link>
      <router-link to="/bar/1">{{ i18n.bar }}</router-link>
      <router-link to="/foo">{{ i18n.foo }}</router-link>
    </div>
    <router-view class="view"></router-view>
  </div>
`,
  methods: {
  	onBack() {
    	router.go(-1)
    },
    onToggle: function() {
 ...