the sortchange hook function is called when sorting, and then the initsort method is triggered. I wanted to keep the first row from moving up (forcing the sorted image to be updated without success), but the table data changed, but the page did not change! Excuse me, why is this happening?

<template>
  <div>

    <!---->
    <div class="brand">
      <el-breadcrumb class="brand">
        <el-breadcrumb-item></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="pad">

      <div>
        <el-container>
          <el-header>
            <i class="icon iconfont icon-icon--"></i>
            <span>3</span>
          </el-header>
          <el-main>
            <el-table
              :data="tableData"
              @sort-change = "sortchange"

              style="width: 100%">
              <el-table-column
                prop="id"
                label=""
                sortable
                width="220%"
              >
              </el-table-column>

              <el-table-column
                prop="audioName"
                label=""
                sortable
                width="220%">
              </el-table-column>

              <el-table-column
                prop="format"
                label=""
                width="220%">
              </el-table-column>

              <el-table-column
                prop="format"
                label=""
                width="220%">
              </el-table-column>

              <el-table-column
                prop="quantity"
                label=""
                sortable
                width="220%">
              </el-table-column>

              <el-table-column prop="sort" label="" width="220%">
                <template slot-scope="scope">
                  <img v-show="scope.row.downimg" :src="scope.row.downimg" width="12%">
                  <img v-show="scope.row.upimg" :src="scope.row.upimg" width="12%">
                </template>
              </el-table-column>

            </el-table>
          </el-main>
        </el-container>

      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue"
  import downimg from "@/assets/xiayi.png"
  import upimg from "@/assets/shangyi.png"
 

  export default {
    name: "video-diversity",
    created(){
     this.initsort()
    },
    data() {
      return {
        audioname: "",
        tableData: [
          {
          id: "100001",
          audioName: "001-",
          format: "MP3",
          size: "10M",
          quantity: 23434,
          downimg: downimg,
          upimg: upimg,
        }, {
          id: "100002",
          audioName: "003-",
          format: "MP3",
          size: "10M",
          quantity: 4534,
          downimg: downimg,
          upimg: upimg,
        }, {
          id: "100003",
          audioName: "005-",
          format: "MP3",
          size: "10M",
          quantity: 45340,
          downimg: downimg,
          upimg: upimg,
        }
        ],
      }
    },
    methods: {
      search() {
        console.log(this.audioname);
      },
      sortchange(obj){
        this.initsort()
      },
      initsort(){
        Vue.set(this.tableData[0], "upimg", "")
        Vue.set(this.tableData[this.tableData.length-1], "downimg", "")

           this.tableData = this.tableData.filter(function (item) {
          console.log(item);
          return item
        })

      },
      downclick(a,b,c){
        console.log(a);

      },
      upclick(){

      }
    },
    watch:{
      "tableData":function (newval,oldval) {
        console.log(newval);
      },
    },
    beforeUpdate(){
      // debugger
      Vue.set(this.tableData[0], "upimg", "")
      Vue.set(this.tableData[this.tableData.length-1], "downimg", "")
    }

  }
</script>