Vue全局变量的内存指向分析

在开发中遇到了这样的一个工作场景，在请求接口拿到数据之后，我需要对拿到的数据进行升序降序的排序算法的计算，但是我在点击排序之后，表头莫名其妙消失了，找到原因是发现全局变量this.tableDataHeader 值发生了改变。

  			this.tableDataHeader = [res.data[0]]
            this.indexLength = Object.keys(res.data[0]).length;
            this.tableData = res.data

我修改的是this.tableData数组中的数据，那为什么this.tableDataHeader中的数据也会被修改呢？
我的处理逻辑是这样的：

   // type是升序降序类型 index 是索引 cin是列索引
        var tempColIndex = colIndex;
        //拿到所有行数长度
        const rowCount = Object.keys(this.tableData).length;
        //拿到列的长度
        const colCount = Object.keys(this.tableData[0]).length;
        // console.log("拿到第一行第一列对应的值", this.tableData[0]["child" + 2]["rdsVal"]);
        const arrData = [];
        //合计标识列
        var temp = null;

        //收集此列所有数据，进行排序 
        for (let index = 0; index < rowCount; index++) {
   
          if (index != 0) {
   
            tempColIndex = tempColIndex + colCount;
          }
          arrData.push(this.tableData[index]["child" + tempColIndex]["rdsVal"])
        }
        // 定义正则表达式 判断是否有合计或者总计
        const reg = /(?:合|总)[\s　]{
   0,2}计/g;
        if (reg.test(this.tableData[0]["child1"]["rdsVal"])) {
   
          //将arrData数组的第一行弹出。
          temp = arrData.shift();
        }
        // 升序排序
        //2.对此列数据进行排序 Y