Element El tab cannot update values when adding El badge with custom tab

The code is as follows. When you click the button to add a value, the value in the bag will not change. You must click tab to update it. How can I update it by clicking Add

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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')

Here is the real address https://jsfiddle.net/k17ovgt9/