vue i18n 国际化不能即时刷新（无法在data中正常使用）

父页面：

data() {
    return {
      breadcrumb: {
        data: [{
            label: this.$t(`message.login`),
            path: '/'
          },
          {
            label: this.$t(`message.menu.${this.$route.meta.localekey}`)
          }
        ]
      },
    }
  },

子组件页面：

<template>
<div>
  <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item v-for="(item,index) in breadcrumb.data" :key="index" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
  </el-breadcrumb>
</div>
</template>

<script>
export default {
  props: ['breadcrumb']
}
</script>

<style>
.bread {
  margin: 20px 10px;
}
</style>

 这样写国际化不能立即刷新，解决方法如下：

方法一：

父页面：

data() {
    return {
      breadcrumb: {
        data: [{
            label: `message.login`,
            path: '/'
          },
          {
            label: `message.menu.${this.$route.meta.localekey}`
          }
        ]
      },
    }
  },

子组件页面：

<template>
<div>
  <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item v-for="(item,index) in breadcrumb.data" :key="index" :to="{ path: item.path }">{{$t(item.label)}}</el-breadcrumb-item>
  </el-breadcrumb>
</div>
</template>

<script>
export default {
  props: ['breadcrumb']
}
</script>

<style>
.bread {
  margin: 20px 10px;
}
</style>

方法二：

父页面：

computed: {
    breadcrumb() {
      return [{
          label: this.$t(`message.login`),
          path: '/'
        },
        {
          label: this.$t(`message.menu.${this.$route.meta.localekey}`)
        }
      ]
    }
  },

子组件子页面：

<template>
<div>
  <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
  </el-breadcrumb>
</div>
</template>

<script>
export default {
  props: ['breadcrumb']
}
</script>

<style>
.bread {
  margin: 20px 10px;
}
</style>

（项目中使用computed方法）

预览效果：https://github.com/iswtt/vue-cli4.0-init.git