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 = { inject: ['i18n'], template: '<div>{{ i18n.thisIsHome }}</div>' }
const Bar = { inject: ['i18n'], template: '<div>{{ i18n.thisIsBar }}: {{ $route.params.id }}</div>' }
const Foo = { inject: ['i18n'], template: '<div>{{ i18n.thisIsFoo }}</div>' }

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

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

new Vue({
  provide: {
    i18n,
  },
  data: () => ({
  	i18n,
  }),
  router,
  template: `
  <div id="app">
    <p>{{ i18n.currentRouteName }}: {{ i18n[$route.name] }}({{ $route.name }})</p>
    <button v-on:click="onToggle">T</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: {
    onToggle: function() {
      if (i18n.language === 'en') {
        Object.assign(i18n, zh)
      } else {
        Object.assign(i18n, en)
      }
    }
  }
}).$mount('#app')