Moveable + selecto reactivity problem in Vue3

Environments

• Framework name: Vue
• Framework version: 3.4.0
• Moveable Component version: 0.28.0 (vue3-moveable)
• Testable Address(optional):

Description

According https://daybrush.com/moveable/storybook/?path=/story/combination-with-other-components--components-selecto the idea is to pass an array of selected targets to the moveable instance.

<script setup lang="ts">
...
const moveableRef = shallowRef<InstanceType<typeof VueMoveable> | null>(null);
</script>

<template>
<VueMoveable ref="moveableRef" :target="selectedTargets" ... />
...
</template>

Because the selectedTargets will be a (shallow)ref to a list of targets, Vue will re-render the complete VueMoveable instance because the props changed. Please note we are NOT passing the ref, we are passing the value here. This causes many "weird" issues in the reactive system that one may not expect at all! Especially, when it is used together with the VueInfinityViewer component, then even sibling components are redrawn.

A super ugly workaround is to not provide the target prop and instead update the targets manually. If you do this, you have to make sure you modify the target directly on the private $_moveable instance.

watch(selectedTargets, (selectedTargets) => {
	moveableRef.value.$_moveable.target = selectedTargets; 
});

Sadly I do not see a a super nice solution to this given how Vue3 works. The obvious solution would be to type the target props as a reference to a list instead of a normal list (so double reference). But still...

Nevertheless, great job on all these components! Hope that this helps at least somebody that is combining this with Vue3.