From b01ae1f47db34550985e6cc6883bdbd1b9d64eb4 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Mon, 20 Jan 2025 06:21:02 +0100
Subject: [PATCH] fix: revert to watching all props in vue wrapper

---
 docs/pages/custom-integration.md   | 10 +++++-----
 packages/vue/src/SelectionArea.vue |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/pages/custom-integration.md b/docs/pages/custom-integration.md
index 4a794d6..c09119c 100644
--- 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
index 4e7fddb..c990872 100644
--- 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
     });