Dynamically update attributes

[outOFFspace]

How do we change the attributes of objects dynamically? For example, I want to change the scaleX, scaleY:

<div class="flex gap-2">
<UInput v-model.number="selectedObject.scaleX" :min="0.5" inputClass="bg-[#2e3447] ps-16 text-[#bbbfd9] ring-none!important ring-transparent focus:ring-none">
<template #leading>
<span class="text-gray-500 dark:text-gray-400 text-xs">ScaleX:</span>
</template>
</UInput>
<UInput v-model.number="selectedObject.scaleY" :min="0.5" inputClass="bg-[#2e3447] ps-16 text-[#bbbfd9] ring-none!important ring-transparent focus:ring-none">
<template #leading>
<span class="text-gray-500 dark:text-gray-400 text-xs">ScaleY:</span>
</template>
</UInput>
</div>

Then I have a watcher:

watch: {
selectedObject: {
deep: true,
async handler(newAttrs: any) {
await nextTick();
if (newAttrs) {
const stage = this.$refs.stage.getStage();
const node = stage.findOne('.' + newAttrs.name);
if (node) {
node.setAttrs(newAttrs);
node.draw();
node.getLayer().batchDraw(); // Redraw the layer
}
}
}
}
},

But a component is redrawing only after I transform it manually.

I've tried to change the item config as well:

<v-stage
                  ref="stage"
                  :config="configStage"
                  @mousedown="handleStageMouseDown"
                  @touchstart="handleStageMouseDown">
                <v-layer ref="layer">
                  <component :key="item.config.name" :is="item.type" :config="item.config" v-for="item in canvas"/>
                  <v-transformer ref="transformer" />
                </v-layer>
              </v-stage>

But it only updates when the item is not transformed. So It might be the issue with the transformer.

[outOFFspace]

The same issue is with rotation. this.$refs.transformer.getNode().forceUpdate() helps only for width, and height changes.

[lavrton]

Can you please make a small online demo of what you are trying? With codesandbox or something similar.