I have a Vue 3 Single File Component which houses a canvas element. I am using the fabric npm package. If I initialize the fabric canvas in the mounted hook using

data: function () {
 return {
  canvas: null,
 }
},
mounted: function () {
 const canvasElement = vm.$refs['canvas']
 const canvas = new fabric.Canvas(canvasElement)
}

The canvas works fine and I am able to resize components, edit text objects etc.

But when I add this line:

this.canvas = canvas

then all objects on the canvas lose their editable and resizable nature. (Double click on text doesn't work, the corners don't allow resizing when using the cursor). Has anyone else experienced this? Is there a known solution?