Element-UI中el-cascader组件多语言切换文字同步更新

1. 问题：
   在使用el-cascader组件进行中英文语言切换时，发现选中文字不进行语言模式同步。在网址上搜索了下当前问题，发现暂无解答，自己就结合官方文档实现了一种方案。

2. 实现思路

<template>
  <!-- 通过cascaderState显示隐藏来重新渲染该组件 -->
  <el-cascader
    v-if="cascaderState"
    v-model="value"
    :options="options"
    :props="cascaderProps"
    :style="{ width: '100%' }"
    placeholder="请选择"
  >
    <template slot-scope="{data}">
      {{ hasEn ? data.enLabel : data.label }}
    </template>
  </el-cascader>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      cascaderState: true,
      value: [],
      options: [
        {
          id: 1,
          label: '指南',
          enLabel: 'zhinan',
          children: [{
            id: 11,
            label: '设计原则',
            enLabel: 'shejiyuanze'
          }]
        },
        {
          id: 2,
          label: '组件',
          enLabel: 'zujian',
          children: [{
            id: 21,
            label: '基本',
            enLabel: 'Basic'
          }]
        }
      ]
    }
  },
  computed: {
    // 语言类型存储在vuex-getters里面
    ...mapGetters(['language']),
    hasEn() {
      return this.language === 'en' // 只有中英文
    },
    // el-cascader的props发生改变不会影响显示值的动态切换
    cascaderProps() {
      const label = this.hasEn ? 'enLabel' : 'label'
      return { value: 'id', label }
    }
  },
  watch: {
    'hasEn'() {
      this.cascaderState = false
      this.$nextTick(() => {
        this.cascaderState = true
      })
    }
  }
}
</script>

3. 若有其它解决思路，欢迎大家在下方留言