cg-container causes my sizes to be messed up about chessground HOT 3 OPEN

mounted() {
    this.calculateSquareSize();
    window.addEventListener("resize", this.calculateSquareSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateSquareSize);
  },

    calculateSquareSize() {
    //   let width = board_space.offsetWidth - 7; // for the numbers on the side of the ground
    //   width -= width % 8; // fix chrome alignment errors; https://github.com/ornicar/lila/pull/3881
    const boardSpace = this.$refs.boardSpace as HTMLElement;
    const boardWrap = document.querySelector(".cg-wrap") as HTMLElement;
    const rect = boardSpace.getBoundingClientRect();
    let size = Math.min(rect.width, rect.height);
    size -= 7; // adjust for borders and padding
    size -= size % 8; // ensure the size is a multiple of 8
    boardWrap.style.width = size + "px";
    boardWrap.style.height = size + "px";
    document.body.dispatchEvent(new Event("chessground.resize"));
    // idk why i need to do this again, but it works it also yeets the call stack.  
    // Fix to resize the board when using windows maximize button
    window.dispatchEvent(new Event("resize"));
  },