Vue.js3 + TypeScript + Composition APIで、Fabric.jsのオブジェクの拡大縮小や傾き変更ができないときの対処法

Fabric.jsのオブジェクトをマウス操作で拡大縮小や傾き変更ができない状況になりました。
本来はキャンバスにオブジェクトを生成したらデフォルトで操作できるはず。

本来はキャンバスにオブジェクトを生成したらデフォルトで操作できるはず。

ググっても有効な情報が無かったのですが、自己解決しました。

オブジェクトのインスタンスをリアクティブにすれば良いだけでした。
（移動だけできていたのでちょっと苦戦した。。）

変更前コード抜粋（オブジェクト移動だけしか出来ない）

const canvas = ref<fabric.Canvas>();
const myCanvas = ref<HTMLCanvasElement>();

onMounted(() => {
  canvas.value = new fabric.Canvas(myCanvas.value!);
  const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'blue',
  width: 30,
  height: 30,
  });
  canvas.value.add(rect);
  });

変更後コード抜粋（オブジェクト移動・拡大縮小・傾き変更もできる）

const canvas = ref<fabric.Canvas>();
const myCanvas = ref<HTMLCanvasElement>();
const rect = ref();

onMounted(() => {
    canvas.value = new fabric.Canvas(myCanvas.value!);
    rect.value = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'blue',
    width: 30,
    height: 30,
    });
    canvas.value.add(rect.value);
});