element el-tab使用自定义标签页加入el-badge时无法更新数值

Question

代码如下，点击按钮增加数值时bage里的数值不会改变，必须点击tab才会更新，请问如何实现点击增加即更新

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js"></script>
<div id="app">
<template>
<el-button @click="q">+</el-button>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first"><span slot="label" style="position: relative;">
          用户管理
          <el-badge :value="aa" class="badge-a"/>
        </span></el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
</div>

var Main = {
    data() {
      return {
             aa:0,
        activeName: 'second'
      };
    },
    methods: {
    q() {
    this.aa++
    },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

下面是实列地址
https://jsfiddle.net/k17ovgt9/

Answer 1

组件嵌套的太深有可能会有这个情况 试下 this.$forceUpdate()

Answer 2

可以在el-tab-pane上绑一个key，每次badge的value变化的时候，key的值也变化，就可以重新刷新一次组件。
Demo：https://codepen.io/anon/pen/g...

Answer 3

this.$children[0].$children[0].$forceUpdate()，就是找到el-tabs下的整个头部标签元素强制刷新就好了

Answer 4

只需找到el-badge 的父组件的dom节点使用$forceUpdate()方法即可实现