As in the title, I'm using fabricJS 4.6.0 with VueJs 3.

I'm trying to simply setup fabric with resizable rectangles.

My problem is accessing the object canvas outside the initFabric method.

I can't resize or rotate the rectangle, just move it.

The only way to make it works is declare canvas as const if I use this.canvas doesn't work.

here the jsfiddle https://jsfiddle.net/8vzc3bj5/19/

initFabric: function () {
    var canvasEl = this.$refs.canvas;
    canvasEl.width = 1920;
    canvasEl.height = 1080;

    const canvas = new fabric.Canvas(canvasEl, {
        // isDrawingMode: true,
        centeredScaling: true,
        backgroundColor: "#fff",
        selectionBorderColor: "rgba(255, 255, 255, 0.8)",
        selectionColor: "rgba(255, 255, 255, 0.8)",
        selectionLineWidth: 2,
        borderColor: "gray",
        cornerColor: "black",
        cornerSize: 12,
        transparentCorners: true,
    });

    canvas.on("selection:created", this.handleSelection);
    canvas.on("selection:updated", this.handleSelection);

    canvas.on("after:render", this.updateCanvas);
    canvas.on("object:modified", this.updateCanvas);
    canvas.on("object:added", this.updateCanvas);
    canvas.on("object:removed", this.updateCanvas);

    canvas.on("mouse:wheel", (opt) => {
        var delta = opt.e.deltaY;
        var zoom = canvas.getZoom();
        zoom *= 0.999 ** delta;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        canvas.zoomToPoint(
            { x: opt.e.offsetX, y: opt.e.offsetY },
            zoom
        );
        opt.e.preventDefault();
        opt.e.stopPropagation();
    });

    this.$nextTick(() => {
        var rect = new fabric.Rect({
            left: 100,
            top: 50,
            fill: "yellow",
            width: 200,
            height: 100,
            stroke: "lightgreen",
            strokeWidth: 4,
            zoomX: 1,
            zoomY: 1,
            dirty: true,
        });
        canvas.add(rect);
        rect.center();
        canvas.setActiveObject(rect);
        canvas.bringToFront(rect);
        canvas.renderAll();
    });
    this.resizeCanvas();
},

Thanks