fix: revert to watching all props in vue wrapper

simonwep · Jan 20, 2025 · b01ae1f · b01ae1f
1 parent edba02e
commit b01ae1f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/docs/pages/custom-integration.md b/docs/pages/custom-integration.md
@@ -23,7 +23,7 @@ Example based on vue and react:
 </template>
 
 <script lang="ts" setup>
-import {shallowRef, useTemplateRef, watch} from 'vue';
+import { shallowRef, useTemplateRef, watchEffect } from 'vue';
 import SelectionArea, { SelectionEvent } from '@viselect/vanilla';
 
 // Refs to the container and the instance
@@ -37,12 +37,12 @@ const start = (evt: SelectionEvent) => console.log('start', evt);
 const move = (evt: SelectionEvent) => console.log('move', evt);
 const stop = (evt: SelectionEvent) => console.log('stop', evt);
 
-// Watch container and mount the instance
-watch(container, (element) => {
-  if (element) {
+// Watch container as well as prop and mount instance
+watchEffect(() => {
+  if (container.value) {
     instance.value?.destroy();
     instance.value = new SelectionArea({
-      boundaries: element,
+      boundaries: container.value,
       // ...your options
     });
 

diff --git a/packages/vue/src/SelectionArea.vue b/packages/vue/src/SelectionArea.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import SelectionArea, {SelectionEvent, PartialSelectionOptions} from '@viselect/vanilla';
-import {onBeforeUnmount, shallowRef, useTemplateRef, watch} from 'vue';
+import {onBeforeUnmount, shallowRef, useTemplateRef, watchEffect} from 'vue';
 
 const emit = defineEmits<{
   (e: 'before-start', v: SelectionEvent): void;
@@ -24,11 +24,11 @@ const props = defineProps<{
 const container = useTemplateRef('container');
 const instance = shallowRef<SelectionArea | undefined>();
 
-watch(container, (element) => {
-  if (element) {
+watchEffect(() => {
+  if (container.value) {
     instance.value?.destroy();
     instance.value = new SelectionArea({
-      boundaries: element,
+      boundaries: container.value,
       ...props.options
     });