El-table data source: data= "tableData" changes dynamically, how to refresh the table in real time

problem description

now there is a requirement that the front end dynamically modifies some data in the table, hoping that when the data source changes, the table can also refresh the status in real time.

is there any need for this and is there a way to solve it?

add:
to be more specific about the scenario, I now need to add

in table.

<el-table-column
        label=""
        align="center">
         <template slot-scope="scope">
          <el-checkbox :checked="scope.row.restaurantTagTypes[0].checked" @change = "changeStatus1(scope.$index, scope.row)">{{scope.row.restaurantTagTypes[0].restaurantTagText}}</el-checkbox>
          <el-checkbox :checked="scope.row.restaurantTagTypes[1].checked" @change = "changeStatus2(scope.$index, scope.row)">{{scope.row.restaurantTagTypes[1].restaurantTagText}}</el-checkbox>
        </template>
      </el-table-column>

implementation method

changeStatus1(index, row) {
        console.log("row---", JSON.stringify(row.restaurantTagTypes))
        console.log("111-----" + JSON.stringify(this.tableData[index].restaurantTagTypes))
        if (row.restaurantTagTypes[0].checked === true) {
          console.log("true")
          this.tableData[index].restaurantTagTypes[0].status = 0
          this.tableData[index].restaurantTagTypes[0].checked = false
        } else {
          console.log("false")
          this.tableData[index].restaurantTagTypes[0].status = 1
          this.tableData[index].restaurantTagTypes[0].checked = true
          if (this.tableData[index].restaurantTagTypes[1].checked === true) {
            this.tableData[index].restaurantTagTypes[1].checked = false
            this.tableData[index].restaurantTagTypes[1].status = 0
          }
        }
        console.log("222-----" + JSON.stringify(this.tableData[index].restaurantTagTypes))
      },
      changeStatus2(index, row) {
        console.log("row222---", JSON.stringify(row.restaurantTagTypes))
        console.log("333-----" + JSON.stringify(this.tableData[index].restaurantTagTypes))
        if (row.restaurantTagTypes[1].checked === true) {
          console.log("true")
          this.tableData[index].restaurantTagTypes[1].status = 0
          this.tableData[index].restaurantTagTypes[1].checked = false
        } else {
          console.log("false")
          this.tableData[index].restaurantTagTypes[1].status = 1
          this.tableData[index].restaurantTagTypes[1].checked = true
          if (this.tableData[index].restaurantTagTypes[0].checked === true) {
            this.tableData[index].restaurantTagTypes[0].checked = false
            row.restaurantTagTypes[1].checked = false
            this.tableData[index].restaurantTagTypes[0].status = 0
          }
        }

        console.log("444-----" + JSON.stringify(this.tableData[index].restaurantTagTypes))
      }

also tried to use v-model , and then I have changed the data source in the changeStatus method. I expect that the CheckBox can also change. At most, I can only choose one or not, and the result is not the same as expected

Vue.js

Dec.21,2021