Why is a vue js div changing position on an interact.js grid?

Question

I'm using interact js and calculations to try to save a representation of a room on a blueprint and return it to the same relative place on the grid when the blueprint is reloaded. On floor reload, however, the interact js object moves at a seemingly random interval. This continues to proceed in the same direction and distance on every floor reload. I have no idea why this keeps happening.

floorClick1(floor) {
            this.savePositions();
            this.rooms = [];
            this.displayedRooms = [];
            floor.rooms.forEach((room)=>{
                if(room.xCoordinate<0||room.yCoordinate<0){
                    this.rooms.push(room);
                }
                else{
                    this.displayedRooms.push(room);
                    this.setPosition(room);
                }
            });
        },
        styleString(room){
            let style = `top: ${room.y}px; left: ${room.x}px; height: ${room.length}px; width: ${room.width}px;`;
            console.log(style);
            return style;
        },
        spawnRoom(room) {
            this.displayedRooms.push(room);
            this.rooms = this.rooms.filter(item => {
                return room.roomId != item.roomId;
            })
        },
        unspawnRoom(room) {
            room.xCoordinate = -1;
            room.yCoordinate = -1;
            room.width = 200;
            room.length = 150;

            this.rooms.push(room);
            this.displayedRooms = this.displayedRooms.filter(item => {
                return room.roomId != item.roomId;
            })
        },

        // grabs position and size of blueprint zone, gets position of each element inside blueprint zone,
        // and logs their positions as a percentage of distance across the zone
        savePosition(roomElementId) {

            const blueprintZone = document.getElementById('grid-target');

            // declares dimension lets for blueprintZone
            let zoneStartPointX = 0;
            let zoneStartPointY = 0;
            let zoneWidth = 0;
            let zoneHeight = 0;

            // grabs dimensions using helper methods
            const startPoints = getPositionXY(blueprintZone);
            zoneStartPointX = startPoints[0];
            zoneStartPointY = startPoints[1];
            const zoneSize = getSizeXY(blueprintZone);
            zoneWidth = zoneSize[0];
            zoneHeight = zoneSize[1];

            // grabs room in the blueprint area
            const roomInZone = document.getElementById(roomElementId);
            console.log(roomInZone);

            // add position for all rooms in the drop zone
            // run roomRelativeXY on each room in list
            // save xy percentage to db
            return roomRelativeXY(roomInZone).concat(getSizeXY(roomInZone));

            // gets the position of an element in the frame
            function getPositionXY(element) {
                let rect = element.getBoundingClientRect();
                let relativePosX = rect.x;
                let relativePosY = rect.y;
                console.log("relativePosX: " + relativePosX + ", relativePosY: " + relativePosY);
                return [relativePosX, relativePosY];
            }

            // gets size of element in frame
            function getSizeXY(element) {
                const rect = element.getBoundingClientRect();
                const elemWidth = rect.width;
                const elemHeight = rect.height;
                console.log("elemWidth: " + elemWidth + ", elemHeight: " +elemHeight);
                return [elemWidth, elemHeight];
            }

            // define function to grab relative position of room and save it to db
            function roomRelativeXY(element) {
                let roomStartPointX = 0;
                let roomStartPointY = 0;

                // get element xy position
                const roomStarts = getPositionXY(element);
                roomStartPointX = roomStarts[0];
                roomStartPointY = roomStarts[1];
                console.log("roomStartPointX: " + roomStartPointX + ", roomStartPointY: " + roomStartPointY);


                // get relative position of room in blueprint zone
                const roomRelativeX = roomStartPointX - zoneStartPointX;
                const roomRelativeY = roomStartPointY - zoneStartPointY;
                console.log("roomRelativeX: " + roomRelativeX + ", roomRelativeY: " + roomRelativeY);

                // get percentage of xy distance across zone
                const roomStartPercentX = roomRelativeX / zoneWidth;
                const roomStartPercentY = roomRelativeY / zoneHeight;
                return [roomStartPercentX, roomStartPercentY];
            }

        },
        savePositions(){
        this.displayedRooms.forEach(room => {
            let roomElementId = room.roomName.substring(0,1)+room.roomId;
            let position = this.savePosition(roomElementId);
            room.xCoordinate = position[0];
            room.yCoordinate = position[1];
            room.width = position[2];
            room.length = position[3];
        });
        },
        setPosition(room) {

            //get width and height and coordinates of dropzone
            //get percentages from room
            //multiply x percentage from room by width of dropzone
            //same for y and height
            //add those numbers to coordinates of dropzone
            //set room elements coordinates, height, and width
            
            const blueprintZone = document.getElementById('grid-target');

            // declares dimension lets for blueprintZone
            let zoneWidth = 0;
            let zoneHeight = 0;

            // grabs dimensions using helper methods
            const startPoints = getPositionXY(blueprintZone);
            let zoneStartPointX = startPoints[0];
            let zoneStartPointY = startPoints[1];
            const zoneSize = getSizeXY(blueprintZone);
            zoneWidth = zoneSize[0];
            zoneHeight = zoneSize[1];

            const roomxPositionInZone = room.xCoordinate * zoneWidth;
            const roomyPositionInZone = room.yCoordinate * zoneHeight;

            const roomxPosition = roomxPositionInZone + zoneStartPointX;
            const roomyPosition = roomyPositionInZone + zoneStartPointY;

            // grabs room in the blueprint area
            room.x = roomxPosition;
            room.y = roomyPosition;

            // gets the position of an element in the frame
            function getPositionXY(element) {
                let rect = element.getBoundingClientRect();
                let relativePosX = rect.x;
                let relativePosY = rect.y;
                console.log("relativePosX: " + relativePosX + ", relativePosY: " + relativePosY);
                return [relativePosX, relativePosY];
            }

            // gets size of element in frame
            function getSizeXY(element) {
                const rect = element.getBoundingClientRect();
                const elemWidth = rect.width;
                const elemHeight = rect.height;
                console.log("elemWidth: " + elemWidth + ", elemHeight: " +elemHeight);
                return [elemWidth, elemHeight];
            }
        }