Tabs: rerender when label changes (#14496)

* tab: fix active bar bug (#14416)

fix: Tab active bar doesn't resize when tab label changes dynamically

* tab: fix active bar bug

changes done as suggested in review

packages/tabs/src/tab-pane.vue

@@ -51,7 +51,7 @@
 
     watch: {
       label() {
-        this.$parent.$forceUpdate();
+        this.$parent.$emit('tabLabelChanged');
       }
     }
   };

packages/tabs/src/tabs.vue

@@ -55,13 +55,14 @@
     },
 
     methods: {
-      calcPaneInstances() {
+      calcPaneInstances(isLabelUpdated = false) {
         if (this.$slots.default) {
           const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
             vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
           // update indeed
           const panes = paneSlots.map(({ componentInstance }) => componentInstance);
-          if (!(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]))) {
+          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
+          if (isLabelUpdated || panesChanged) {
             this.panes = panes;
           }
         } else if (this.panes.length !== 0) {
@@ -172,6 +173,8 @@
       if (!this.currentName) {
         this.setCurrentName('0');
       }
+
+      this.$on('tabLabelChanged', this.calcPaneInstances.bind(null, true));
     },
 
     mounted() {