tabs 组件，动态修改 label 不生效

[mrandpz]

<template>
  <div style="margin-bottom: 20px">
    <el-button size="small" @click="addTab(editableTabsValue)"> add tab </el-button>
  </div>
  <div @click="changeTabs">修改editableTabs</div>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
    <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    ...

    const changeTabs = () => {
      state.editableTabs = [
        {
          title: 'Tab 12',
          name: '1',
          content: 'Tab 12 content',
        },
        {
          title: 'Tab 22',
          name: '2',
          content: 'Tab 22 content',
        },
      ];
      console.log(state.editableTabs);
    };

    ...
    return { ...toRefs(state), addTab, removeTab, changeTabs };
  },
};
</script>