How to correctly set the group scale when loading tiles?

[CarMi0Proggramer]

Hi, I'm creating a tile system with konva.js for a project I have where users can draw on top of map about streets, but I'm getting an error when changing from one zoom to another one, after the first zoom the tiles seems to be higher that they should be. I'm gonna left the code here and some images of the issue

https://github.com/CarMi0Proggramer/vue-konva-tiles.git

In the first zoom panning and the other things are ok, but then when you change the zoom all goes down. I tried inversely scaling the group that contains the tiles and it worked but then I noticed that the tiles where getting smaller than it should be, then when you are in a zoom 6 it seems that you are in a zoom 3.

That was what added when I scaled the group inversely

const tileScale = Math.pow(2, zoom - this.config.min_zoom);

const scale = 1 / tileScale;
this.group.scale({ x: scale, y: scale });

and then updated getTiledPixelBounds to take the tile's scale in account

private getTiledPixelBounds(center: Point) {
    const scale = this.stage.scaleX();
    const zoom = this.getCurrentZoom();
    const tileScale = Math.pow(2, zoom - this.config!.min_zoom);

    const viewW = this.stage.width() / scale;
    const viewH = this.stage.height() / scale;

    const halfW = viewW / 2;
    const halfH = viewH / 2;

    return {
      min: {
        x: (center.x - halfW) * tileScale,
        y: (center.y - halfH) * tileScale,
      },
      max: {
        x: (center.x + halfW) * tileScale,
        y: (center.y + halfH) * tileScale,
      },
    };
  }

[lavrton]

Linked repo is archived. I guess it is not relevant any more. If it is - create a very little demo.