Rudimentary searching

src/components/task/TaskEditComponent.vue

@@ -56,12 +56,10 @@
         emit-value
         map-options
         input-debounce="250"
-        @new-value="addTag"
         :options="skillTagOptions"
         option-label="name"
         option-value="$id"
         @filter="filterSkillTags"
-        new-value-mode="add-unique"
       >
       </q-select>
     </div>
@@ -159,7 +157,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, Ref } from 'vue';
+import { computed, reactive, ref, Ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTaskStore, TASKSTATUS } from 'src/stores/task';
 import type { TaskTag, SkillTag, Task } from 'src/stores/task';
@@ -194,24 +192,33 @@ const boatList = ref<Boat[]>(useBoatStore().boats);
 const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
 const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
 
-function filterSkillTags(val: string, update: (cb: () => void) => void): void {
-  return filterTags(skillTagOptions, taskStore.skillTags, val, update);
-}
-function filterTaskTags(val: string, update: (cb: () => void) => void): void {
-  return filterTags(taskTagOptions, taskStore.taskTags, val, update);
-}
-function filterTasks(val: string, update: (cb: () => void) => void): void {
-  if (val === '') {
-    update(() => {
-      tasks = taskStore.tasks;
-    });
-    return;
-  }
+const filterSkillTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(skillTagOptions, taskStore.skillTags, val, update);
+    }
+);
+const filterTaskTags = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      return filterTags(taskTagOptions, taskStore.taskTags, val, update);
+    }
+);
+const filterTasks = computed(
+  () =>
+    (val: string, update: (cb: () => void) => void): void => {
+      if (val === '') {
+        update(() => {
+          tasks = taskStore.tasks;
+        });
+        return;
+      }
 
-  update(() => {
-    tasks = taskStore.filterTasksByTitle(val);
-  });
-}
+      update(() => {
+        tasks = taskStore.filterTasksByTitle(val);
+      });
+    }
+);
 
 function filterTags(
   optionVar: Ref<(SkillTag | TaskTag)[] | undefined>,
@@ -233,9 +240,6 @@ function filterTags(
   });
 }
 
-function addTag(tag: string) {
-  return;
-}
 // Method to update the model in ISO 8601 format
 const updateDateISO = (value: string) => {
   modifiedTask.due_date = date.formatDate(value, 'YYYY-MM-DD');