前端拖拽问题Sortable

我在父页面打开弹窗的时候copy了一份数据值，然后我在子页面弹窗列用拖拽，弹窗的copy数据拖拽成功但是列表数据没有变化，必须页面全部刷新才会变化，后台存的值都是对的
各位 教教我 实在没有办法了！

弹窗js：
import draggable from "vuedraggable";
import Sortable from "sortablejs";

drag() {
  debugger;
  const el = document.querySelectorAll(
    "#mytable>.el-table__body-wrapper>table>tbody"
  )[0];
  console.log(el);
  Sortable.create(el, {
    disabled: false, // 拖拽不可用? false 启用
    ghostClass: "sortable-ghost", //拖拽样式
    animation: 150, // 拖拽延时，效果更好看
    onEnd: (e) => {
      // 拖拽结束时的触发
        debugger;
        // 拖拽结束时的触发
        let arr = this.dataContents.controlCustoms; // 获取表数据
        console.log(e.newIndex); //0
        console.log(e.oldIndex); //3
        let temp = arr[e.oldIndex];
        arr.splice(e.oldIndex, 1);
        arr.splice(e.newIndex, 0, temp);
        this.controlCustomsCopy = new Array();
       // this.dataContents.controlCustoms = new Array();
        //this.controlCustomsCopy = this.dataContents.controlCustoms ;
        this.$nextTick(function() {
          this.controlCustomsCopy = arr;
         //this.controlCustomsCopy = this.dataContents.controlCustoms;
        // this.dataContents.controlCustoms = this.controlCustomsCopy;
          this.$forceUpdate();
          console.log(this.dataContents.controlCustoms);
          setTimeout(() => {  
            //alert(111)
            this.$forceUpdate();
          }, 100);
        });
    },
  });
},

你要变化的数据是那个

const targetRow = arr.splice(e.oldIndex, 1)[0]
arr.splice(e.newIndex, 0, targetRow)