Replace JSON.parse(JSON.stringify()) with lodash-es cloneDeep for deep cloning Vue reactive data (S7784)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 08:23:44 +08:00
parent 2374363484
commit e9e588385b
11 changed files with 76 additions and 56 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
        "i18next": "^25.8.14",
        "i18next-browser-languagedetector": "^8.2.1",
        "javascript-color-gradient": "^2.5.0",
+        "lodash-es": "^4.17.23",
        "mitt": "^3.0.1",
        "moment": "^2.30.1",
        "pinia": "^3.0.4",
@@ -5932,6 +5933,12 @@
      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
      "license": "MIT"
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+      "license": "MIT"
+    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -7676,7 +7683,7 @@
      "version": "5.9.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
@@ -8383,7 +8390,8 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.3.1.tgz",
      "integrity": "sha512-ht9Mx0eK+j4UO7fZvHNyCGOQEIj4d5+CZDYdxUCHGL4yvEhdDBH6PT4Lt12Ct+O+8qK8K1K31p7iiOghA8ewxQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@acemir/cssom": {
      "version": "0.9.31",
@@ -8512,7 +8520,8 @@
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@csstools/css-color-parser": {
      "version": "4.0.2",
@@ -8528,7 +8537,8 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@csstools/css-syntax-patches-for-csstree": {
      "version": "1.1.0",
@@ -8830,7 +8840,8 @@
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@eslint/object-schema": {
      "version": "3.0.2",
@@ -8852,7 +8863,8 @@
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@hapi/address": {
      "version": "5.1.1",
@@ -9946,7 +9958,8 @@
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "acorn-walk": {
      "version": "8.2.0",
@@ -10272,12 +10285,14 @@
    "chartjs-adapter-moment": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz",
-      "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA=="
+      "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==",
+      "requires": {}
    },
    "chartjs-plugin-datalabels": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
-      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw=="
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "requires": {}
    },
    "chartjs-plugin-dragdata": {
      "version": "2.3.1",
@@ -10602,7 +10617,8 @@
    "cytoscape-popper": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-4.0.1.tgz",
-      "integrity": "sha512-u2gYDMMvGSlAJbNfKvMljOM/p+BrHu0A4VcpELa+xJf54HoMn+nV0iuhALZx+O89b74SKJRy7jYo2WfkD5uvsw=="
+      "integrity": "sha512-u2gYDMMvGSlAJbNfKvMljOM/p+BrHu0A4VcpELa+xJf54HoMn+nV0iuhALZx+O89b74SKJRy7jYo2WfkD5uvsw==",
+      "requires": {}
    },
    "cytoscape-spread": {
      "version": "3.0.0",
@@ -10959,7 +10975,8 @@
      "version": "10.1.8",
      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "eslint-plugin-cypress": {
      "version": "6.1.0",
@@ -11978,6 +11995,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
    },
+    "lodash-es": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+    },
    "lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -13001,7 +13023,8 @@
        "fdir": {
          "version": "6.5.0",
          "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-          "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="
+          "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+          "requires": {}
        }
      }
    },
@@ -13144,7 +13167,7 @@
      "version": "5.9.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true
+      "devOptional": true
    },
    "ufo": {
      "version": "1.6.3",
@@ -13251,7 +13274,8 @@
          "version": "6.5.0",
          "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
          "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
        }
      }
    },
@@ -13298,7 +13322,8 @@
    "vue-chartjs": {
      "version": "5.3.3",
      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
-      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA=="
+      "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==",
+      "requires": {}
    },
    "vue-component-type-helpers": {
      "version": "2.2.12",
@@ -13363,7 +13388,8 @@
    "vue-toast-notification": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.1.3.tgz",
-      "integrity": "sha512-XNyWqwLIGBFfX5G9sK+clq3N3IPlhDjzNdbZaXkEElcotPlWs0wWZailk1vqhdtLYT/93Y4FHAVuzyatLmPZRA=="
+      "integrity": "sha512-XNyWqwLIGBFfX5G9sK+clq3N3IPlhDjzNdbZaXkEElcotPlWs0wWZailk1vqhdtLYT/93Y4FHAVuzyatLmPZRA==",
+      "requires": {}
    },
    "vuedraggable": {
      "version": "4.1.0",
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "i18next": "^25.8.14",
    "i18next-browser-languagedetector": "^8.2.1",
    "javascript-color-gradient": "^2.5.0",
+    "lodash-es": "^4.17.23",
    "mitt": "^3.0.1",
    "moment": "^2.30.1",
    "pinia": "^3.0.4",
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -165,6 +165,7 @@ import ConformanceRadioGroup from "./ConformanceSidebar/ConformanceRadioGroup.vu
 import ConformanceShowBar from "./ConformanceSidebar/ConformanceShowBar.vue";
 import ConformanceTimeRange from "./ConformanceSidebar/ConformanceTimeRange.vue";
 import ConformanceSelectResult from "./ConformanceSidebar/ConformanceSelectResult.vue";
+import { cloneDeep } from "lodash-es";

 const $toast = useToast();

@@ -920,9 +921,7 @@ function getSequenceData() {
        task_seq: selectCfmSeqDirectly.value,
      };
      isSubmitReset();
-      isSubmitCfmSeqDirectly.value = JSON.parse(
-        JSON.stringify(selectCfmSeqDirectly.value),
-      );
+      isSubmitCfmSeqDirectly.value = cloneDeep(selectCfmSeqDirectly.value);
      break;
    case "Eventually follows":
      dataToSave = {
@@ -930,9 +929,7 @@ function getSequenceData() {
        task_seq: selectCfmSeqEventually.value,
      };
      isSubmitReset();
-      isSubmitCfmSeqEventually.value = JSON.parse(
-        JSON.stringify(selectCfmSeqEventually.value),
-      );
+      isSubmitCfmSeqEventually.value = cloneDeep(selectCfmSeqEventually.value);
      break;
    case "Short loop(s)":
      dataToSave = { type: "short-loops" };
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -118,6 +118,7 @@
 import { ref, computed, onBeforeUnmount } from "vue";
 import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
 import emitter from "@/utils/emitter";
+import { cloneDeep } from "lodash-es";

 const props = defineProps(["data", "listSeq", "isSubmit", "category"]);

@@ -129,7 +130,7 @@ const datadata = computed(() => {
  // Sort the Activity List
  let newData;
  if (props.data !== null) {
-    newData = JSON.parse(JSON.stringify(props.data));
+    newData = cloneDeep(props.data);
    sortNumEngZhtw(newData);
  }
  return newData;
@@ -195,7 +196,7 @@ function onEnd(evt) {
 }

 // created
-const newlist = JSON.parse(JSON.stringify(props.listSeq));
+const newlist = cloneDeep(props.listSeq);
 listSequence.value = props.isSubmit ? newlist : [];
 emitter.on("reset", (data) => {
  listSequence.value = [];
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -200,6 +200,7 @@ import emitter from "@/utils/emitter";
 import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue";
 import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue";
 import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue";
+import { cloneDeep } from "lodash-es";

 const conformanceStore = useConformanceStore();
 const {
@@ -373,7 +374,7 @@ emitter.on("actListData", (data) => {
  state.containstTasksData = data;
 });
 emitter.on("actRadioData", (newData) => {
-  const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data
+  const data = cloneDeep(newData);

  const categoryMapping = {
    cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"],
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -240,6 +240,7 @@ import { storeToRefs } from "pinia";
 import { useConformanceStore } from "@/stores/conformance";
 import emitter from "@/utils/emitter";
 import TimeRangeDuration from "@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue";
+import { cloneDeep } from "lodash-es";

 const conformanceStore = useConformanceStore();
 const {
@@ -613,21 +614,15 @@ emitter.on("isRadioChange", (data) => {
    switch (selectedRuleType.value) {
      case "Processing time":
        state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
-        state.timeCfmPtEteAllDefault = JSON.parse(
-          JSON.stringify(state.timeCfmPtEteAll),
-        );
+        state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
        break;
      case "Waiting time":
        state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-        state.timeCfmWtEteAllDefault = JSON.parse(
-          JSON.stringify(state.timeCfmWtEteAll),
-        );
+        state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
        break;
      case "Cycle time":
        state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-        state.timeCfmCtEteAllDefault = JSON.parse(
-          JSON.stringify(state.timeCfmCtEteAll),
-        );
+        state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
        break;
      default:
        break;
@@ -645,21 +640,15 @@ emitter.on("isRadioActSeqMoreChange", (data) => {
      switch (selectedRuleType.value) {
        case "Processing time":
          state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
-          state.timeCfmPtEteAllDefault = JSON.parse(
-            JSON.stringify(state.timeCfmPtEteAll),
-          );
+          state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
          break;
        case "Waiting time":
          state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-          state.timeCfmWtEteAllDefault = JSON.parse(
-            JSON.stringify(state.timeCfmWtEteAll),
-          );
+          state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
          break;
        case "Cycle time":
          state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-          state.timeCfmCtEteAllDefault = JSON.parse(
-            JSON.stringify(state.timeCfmCtEteAll),
-          );
+          state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
          break;
        default:
          break;
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -36,6 +36,7 @@

 import { ref, watch } from "vue";
 import Durationjs from "@/components/DurationInput.vue";
+import { cloneDeep } from "lodash-es";

 const props = defineProps(["time", "select"]);
 const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
@@ -55,10 +56,10 @@ const durationMax = ref(null);
 /** Deep-copies timeData min/max values to the Vue component boundaries. */
 function setTimeValue() {
  // Deep copy the original timeData values
-  minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
-  minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
-  maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
-  maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+  minVuemin.value = cloneDeep(timeData.value.min);
+  minVuemax.value = cloneDeep(timeData.value.max);
+  maxVuemin.value = cloneDeep(timeData.value.min);
+  maxVuemax.value = cloneDeep(timeData.value.max);
 }

 /**
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -125,6 +125,7 @@ import { ref, computed, watch, nextTick, useTemplateRef, onBeforeUnmount } from
 import { storeToRefs } from "pinia";
 import { useConformanceStore } from "@/stores/conformance";
 import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
+import { cloneDeep } from "lodash-es";

 const props = defineProps([
  "listModal",
@@ -183,7 +184,7 @@ const traceList = computed(() => {

 const caseData = computed(() => {
  if (infiniteData.value !== null) {
-    const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+    const data = cloneDeep(infiniteData.value);
    data.forEach((item) => {
      item.facets.forEach((facet, index) => {
        item[`fac_${index}`] = facet.value; // Create a new key-value pair
@@ -201,7 +202,7 @@ const caseData = computed(() => {
 });

 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
+  const data = cloneDeep(props.cases);
  if (!data || data.length === 0) return [];
  const facetName = (facName) =>
    facName
--- a/src/components/Discover/Map/Filter/TraceFilter.vue
+++ b/src/components/Discover/Map/Filter/TraceFilter.vue
@@ -136,6 +136,7 @@ import { storeToRefs } from "pinia";
 import { useAllMapDataStore } from "@/stores/allMapData";
 import { useLoadingStore } from "@/stores/loading";
 import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
+import { cloneDeep } from "lodash-es";

 const emit = defineEmits(["filter-trace-selectArea"]);

@@ -228,7 +229,7 @@ const chartData = computed(() => {
 });

 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+  const data = cloneDeep(infiniteData.value);
  data.forEach((item) => {
    item.attributes.forEach((attribute, index) => {
      item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -239,7 +240,7 @@ const caseData = computed(() => {
 });

 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data
+  const data = cloneDeep(baseCases.value);
  let result = [
    { field: "id", header: "Case Id" },
    { field: "started_at", header: "Start time" },
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -115,6 +115,7 @@ import { storeToRefs } from "pinia";
 import { useLoadingStore } from "@/stores/loading";
 import { useAllMapDataStore } from "@/stores/allMapData";
 import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
+import { cloneDeep } from "lodash-es";

 const props = defineProps(["sidebarTraces", "cases"]);
 const emit = defineEmits(["switch-Trace-Id"]);
@@ -164,7 +165,7 @@ const traceList = computed(() => {
 });

 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+  const data = cloneDeep(infiniteData.value);
  data.forEach((item) => {
    item.attributes.forEach((attribute, index) => {
      item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -175,7 +176,7 @@ const caseData = computed(() => {
 });

 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
+  const data = cloneDeep(props.cases);
  let result = [
    { field: "id", header: "Case Id" },
    { field: "started_at", header: "Start time" },
@@ -215,7 +216,7 @@ watch(showTraceId, (newValue, oldValue) => {

 watch(infiniteFirstCases, (newValue) => {
  if (infiniteFirstCases.value)
-    infiniteData.value = JSON.parse(JSON.stringify(newValue));
+    infiniteData.value = cloneDeep(newValue);
 });

 /**
--- a/src/views/Files/FilesPage.vue
+++ b/src/views/Files/FilesPage.vue
@@ -482,6 +482,7 @@ import {
  reallyDeleteInformation,
 } from "@/module/alertModal.js";
 import { escapeHtml } from "@/utils/escapeHtml.js";
+import { cloneDeep } from "lodash-es";

 const router = useRouter();

@@ -586,7 +587,7 @@ const isCompareDisabledButton = computed(() => {
 const reallyDeleteData = computed(() => {
  let result = [];
  if (store.allFiles.length !== 0) {
-    result = JSON.parse(JSON.stringify(store.allFiles));
+    result = cloneDeep(store.allFiles);
    result = result.filter((file) => file.is_deleted === true);
  }
  return result;
@@ -602,7 +603,7 @@ watch(filesTag, (newValue) => {

 watch(allFiles, (newValue) => {
  if (newValue !== null)
-    compareData.value = JSON.parse(JSON.stringify(newValue));
+    compareData.value = cloneDeep(newValue);
 });

 watch(