Vue 如何將獲取到的數組對象 合并組成新數組對象？

原素組對象：

[
    {
        "title": "標題",
        "comps": [
            {
                "id": 88,
                "name": "bb",
                "nameEn": "",
                "modes": "INDICATECARD",
            },
            {
                "id": 88,
                "name": "bb",
                "nameEn": "",
                "modes": "INDICATECARD",
            }
        ]
    },
    {
        "title": "標題",
        "comps": [
            {
                "id": 83,
                "name": "阿薩德",
                "nameEn": "ad",
                "modes": "CHARTPIE",
            }
        ]
    },
    {
        "title": "標題",
        "comps": [
            {
                "id": 85,
                "name": "測試001",
                "nameEn": "test0011",
                "modes": "CHARTPIE",
            }
        ]
    },
    {
        "title": "標題",
        "comps": [],
        "guid": 1658455624480
    }
]

需要實現成這樣：

[
    {
        "title": "標題",
        "compAryIds": [
            88,
            88
        ]
    },
    {
        "title": "標題",
        "compAryIds": [
            83
        ]
    },
    {
        "title": "標題",
        "compAryIds": [
            85
        ]
    },
    {
        "title": "標題",
        "compAryIds": [],
    }
]

我的實現方法：

saveEdit() {
  const compIds = [];
  const arr = [];
  this.floors.map((floor) => {
    floor.comps.map((comp) => {
      arr.push(comp.id);
      let obj = {};
      obj.title = floor.title;
      obj.compAryIds = arr;
      compIds.push(obj);
      console.log(compIds);
    });
  });
  createRowData(compIds).then(() => {
    this.$message.success('保存成功');
  });
},

但是打印出來的確是這樣，求教哪里寫錯了：