Use vue.js and jQuery UI to implement sorting and only submit the changed order to the background for update

JQuery UI is easy to implement sorting with plug-ins, but you need to implement your own to select the changes first.
The idea is not difficult. It is to compare the backup and change of the data, and pick out the changes.
There is a hole here, that is, the problem of deep copy, that is, if the original data is not copied, the copied data will change with the change of the original data. I've looked up a lot of deep copy methods on the Internet, but it's not suitable for array elements that are objects like [{}, {}]. Later it was found that the objects in the array had to be recreated. Code above.

html

           <tbody id="mapSortable">
              <tr v-for="(li,index) in mapData">
                 <td style="text-align: right;" class="order" :data-id="index" :data-sort="li.sort">{{index+1}}</td>
                 <td style="text-align: center;"><input type="checkbox" v-model="li.display_status"/></td>
                 <td style="text-align: left;">{{li.maptraffic_id}}</td>
                 <td style="text-align: left;">{{li.manage_title}}</td>
              </tr>
           </tbody>

js

const sortData = {
  mapData : [],
  trafficData : [],
  mapArr : [],
  trafficArr : [],
};
var mapData;
$(function() {
  // Vue の incipient
  new Vue({
    el : '#manageArea',
    data : sortData,
    methods : {
      optMap : function(){ sortData.opt = 1; },
      optTraffic : function(){ sortData.opt = 0; },
      updateBtn : updateBtn,
    },
  });
  initAjax();
  // sort
  tableSort('#trafSortable');
  tableSort('#mapSortable');
});
/**
 * Operation after clicking the update button
 */
function updateBtn(){
  var index;
  var sort;
  var display_statu;
  var display_status;
  for (var i = 0, rowTotal = sortData.mapData.length; i < rowTotal; i += 1) {
    index = $($('#mapSortable .order')[i]).data("id");
    sort = $($('#mapSortable .order')[i]).data("sort");
    sorts = mapData[i].sort;
    display_statu = mapData[i].display_status;
    display_status = sortData.mapData[i].display_status;
    // Put the changed data into the array
    if(sort != sorts||display_statu != display_status){
      sortData.mapData[index].sort = sorts;
      sortData.mapArr.push(sortData.mapData[i])
      sortData.changecount = 1;
    }
  }
  updateAjax();
}
//Copy array
function copyArr(arr) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    let param = {'sort':null,'display_status':null };
    param.sort=arr[i].sort
    param.display_status=arr[i].display_status
    res.push(param);
  }
  return res
}

// Sorting method
function tableSort(tableId){
  $(tableId).sortable();
  $(tableId).disableSelection();
  $(tableId).on('sortstop', function (e, ui) {
    var rows = $(tableId+' .order');
    for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
      $($(tableId+' .order')[i]).text(i + 1);
    }
  })
}

I have two changes here, one is the order, the other is the value of the checkbox.