watch multiple

src/features/mark/MarkHistory.vue

@@ -107,7 +107,7 @@
 <script lang="ts">
 import { getHistoryTask } from "@/api/markPage";
 import { MarkHistoryOrderBy, MarkHistorySortField, Task } from "@/types";
-import { defineComponent, ref, watch, watchEffect } from "vue";
+import { defineComponent, ref, watch } from "vue";
 import { store } from "./store";
 import {
   CloseOutlined,
@@ -135,24 +135,23 @@ export default defineComponent({
     const order = ref("markerTime" as MarkHistoryOrderBy);
     const sort = ref("DESC" as MarkHistorySortField);
 
-    watch(
-      () => [store.historyOpen, order, sort, currentPage],
-      async () => {
-        if (store.historyOpen) {
-          replaceCurrentTask(undefined);
-          await updateHistoryTask({
-            secretNumber: secretNumberInput.value,
-            order: order.value,
-            sort: sort.value,
-            pageNumber: currentPage.value,
-          });
-          replaceCurrentTask(store.historyTasks[0]);
-        } else {
-          replaceCurrentTask(store.tasks[0]);
-          store.historyTasks.splice(0);
-        }
+    const currentTaskChange = async () => {
+      if (store.historyOpen) {
+        replaceCurrentTask(undefined);
+        await updateHistoryTask({
+          secretNumber: secretNumberInput.value,
+          order: order.value,
+          sort: sort.value,
+          pageNumber: currentPage.value,
+        });
+        replaceCurrentTask(store.historyTasks[0]);
+      } else {
+        replaceCurrentTask(store.tasks[0]);
+        store.historyTasks.splice(0);
       }
-    );
+    };
+    watch(() => store.historyOpen, currentTaskChange);
+    watch([order, sort, currentPage], currentTaskChange);
 
     watch(
       () => props.shouldReload,