el-collapse组件数据更新不及时的问题

<el-collapse v-model="activeSection" accordion>
      <el-collapse-item
        :name="index"
        v-for="(item, index) in addArray"
        :key="item.sectionCount"
        ref="collapse"
      >
        <videoContent :item="item"></videoContent>
      </el-collapse-item>
    </el-collapse>

情景：

el-collapse绑定了 addArray，在操作时， 展开折叠面板时，addArray更新。但是通过测试发现，el-collapse-item中的item并不会更新数据，只有收起折叠面板时才会更新item数据。

解决方法：

使用 $forceUpdate() 方法来强制刷新组件，这样 el-collapse-item 的数据变动会触发重新渲染，确保视图更新及时。

<template>
  <el-collapse v-model="activeSection" accordion>
    <el-collapse-item
      :name="index"
      v-for="(item, index) in addArray"
      :key="item.sectionCount"
      ref="collapse"
    >
      <!-- 省略部分代码 -->
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeSection: null, // v-model 绑定数据
      addArray: [], //  el-collapse-item 数据
      forceUpdateKey: 0, // 强制刷新的标识
    };
  },
  methods: {
    // 假设有一个方法用于更新 addArray 的数据，比如 pushItemToArray
    pushItemToArray(item) {
      this.addArray.push(item);
      this.forceUpdateKey++; // 每次添加新数据时，增加 forceUpdateKey，触发强制刷新
    },
    // ... 其他方法
  },
  watch: {
    // 监听 forceUpdateKey 变化，触发强制刷新
    forceUpdateKey() {
      this.$forceUpdate();
    },
  },
};
</script>