el-table表头无法更新问题

如上图所示，监控点名称后面的图标无法在点击的时候切换成另一个图标。通过设置监控点名称这列表头的key为index + Math.random()解决。

<el-table-column
  v-for="(item, index) in tableColumn"
  :key="index == 0 ? index + Math.random() : index"
  :prop="item.prop"
  :formatter="item.formatter"
  :width="item.width"
  :show-overflow-tooltip="true"
  :label="item.label"
>
  <template slot="header" width="120px" v-if="index == 0">
    <div class="flexStart showDetail" @click="sortData">
      <span>监控点名称</span>
      <img
        class="bgimg"
        id="bgimg"
        :src="[
          rotate
            ? require('../../../../assets/img/order_up.png')
            : require('../../../../assets/img/order_down.png')
        ]"
        alt=""
      />
    </div>
  </template>
</el-table-column>