From b4aa65018cfb891c2e6fe35a75060558b701b04a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sun, 22 May 2022 20:35:02 +0000
Subject: [PATCH] fix: watcher in listSearch (#1992)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1992
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/tasks/partials/listSearch.vue | 24 +++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index f5011741e..08489391d 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -17,18 +17,16 @@
 </template>
 
 <script lang="ts" setup>
-import {reactive, ref, watchEffect} from 'vue'
+import {reactive, ref, watch} from 'vue'
+import type {PropType} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 import ListModel from '@/models/list'
 import Multiselect from '@/components/input/multiselect.vue'
 
-const store = useStore()
-const {t} = useI18n()
-
-const list = reactive(new ListModel())
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<ListModel>,
 		validator(value) {
 			return value instanceof ListModel
 		},
@@ -37,9 +35,19 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue'])
 
-watchEffect(() => {
-	Object.assign(list, props.modelValue)
-})
+const store = useStore()
+const {t} = useI18n()
+
+const list = reactive<ListModel>(new ListModel())
+
+watch(
+	() => props.modelValue,
+	(newList) => Object.assign(list, newList),
+	{
+		immediate: true,
+		deep: true,
+	},
+)
 
 const foundLists = ref([])
 function findLists(query: string) {