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>

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",

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",

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(
+      isSubmitCfmSeqDirectly.value = cloneDeep(selectCfmSeqDirectly.value);
-        JSON.stringify(selectCfmSeqDirectly.value),
-      );
       break;
     case "Eventually follows":
       dataToSave = {
@@ -930,9 +929,7 @@ function getSequenceData() {
         task_seq: selectCfmSeqEventually.value,
       };
       isSubmitReset();
-      isSubmitCfmSeqEventually.value = JSON.parse(
+      isSubmitCfmSeqEventually.value = cloneDeep(selectCfmSeqEventually.value);
-        JSON.stringify(selectCfmSeqEventually.value),
-      );
       break;
     case "Short loop(s)":
       dataToSave = { type: "short-loops" };

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 = [];

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"],

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(
+        state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
-          JSON.stringify(state.timeCfmPtEteAll),
-        );
         break;
       case "Waiting time":
         state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-        state.timeCfmWtEteAllDefault = JSON.parse(
+        state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
-          JSON.stringify(state.timeCfmWtEteAll),
-        );
         break;
       case "Cycle time":
         state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-        state.timeCfmCtEteAllDefault = JSON.parse(
+        state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
-          JSON.stringify(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(
+          state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
-            JSON.stringify(state.timeCfmPtEteAll),
-          );
           break;
         case "Waiting time":
           state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-          state.timeCfmWtEteAllDefault = JSON.parse(
+          state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
-            JSON.stringify(state.timeCfmWtEteAll),
-          );
           break;
         case "Cycle time":
           state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-          state.timeCfmCtEteAllDefault = JSON.parse(
+          state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
-            JSON.stringify(state.timeCfmCtEteAll),
-          );
           break;
         default:
           break;

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));
+  minVuemin.value = cloneDeep(timeData.value.min);
-  minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+  minVuemax.value = cloneDeep(timeData.value.max);
-  maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
+  maxVuemin.value = cloneDeep(timeData.value.min);
-  maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+  maxVuemax.value = cloneDeep(timeData.value.max);
 }
 
 /**

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

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" },

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);
 });
 
 /**

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(