diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index c07b430..3370406 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -920,8 +920,8 @@ function getSequenceData() {
         task_seq: selectCfmSeqDirectly.value,
       };
       isSubmitReset();
-      isSubmitCfmSeqDirectly.value = JSON.parse(
-        JSON.stringify(selectCfmSeqDirectly.value),
+      isSubmitCfmSeqDirectly.value = structuredClone(
+        selectCfmSeqDirectly.value,
       );
       break;
     case "Eventually follows":
@@ -930,8 +930,8 @@ function getSequenceData() {
         task_seq: selectCfmSeqEventually.value,
       };
       isSubmitReset();
-      isSubmitCfmSeqEventually.value = JSON.parse(
-        JSON.stringify(selectCfmSeqEventually.value),
+      isSubmitCfmSeqEventually.value = structuredClone(
+        selectCfmSeqEventually.value,
       );
       break;
     case "Short loop(s)":
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
index 7280074..863c1f6 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -129,7 +129,7 @@ const datadata = computed(() => {
   // Sort the Activity List
   let newData;
   if (props.data !== null) {
-    newData = JSON.parse(JSON.stringify(props.data));
+    newData = structuredClone(props.data);
     sortNumEngZhtw(newData);
   }
   return newData;
@@ -195,7 +195,7 @@ function onEnd(evt) {
 }
 
 // created
-const newlist = JSON.parse(JSON.stringify(props.listSeq));
+const newlist = structuredClone(props.listSeq);
 listSequence.value = props.isSubmit ? newlist : [];
 emitter.on("reset", (data) => {
   listSequence.value = [];
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
index 23e9986..9139357 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -373,7 +373,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 = structuredClone(newData); // Deep copy the original cases data
 
   const categoryMapping = {
     cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"],
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index 5532df8..14b097f 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -613,20 +613,20 @@ 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 = structuredClone(
+          state.timeCfmPtEteAll,
         );
         break;
       case "Waiting time":
         state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-        state.timeCfmWtEteAllDefault = JSON.parse(
-          JSON.stringify(state.timeCfmWtEteAll),
+        state.timeCfmWtEteAllDefault = structuredClone(
+          state.timeCfmWtEteAll,
         );
         break;
       case "Cycle time":
         state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-        state.timeCfmCtEteAllDefault = JSON.parse(
-          JSON.stringify(state.timeCfmCtEteAll),
+        state.timeCfmCtEteAllDefault = structuredClone(
+          state.timeCfmCtEteAll,
         );
         break;
       default:
@@ -645,20 +645,20 @@ 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 = structuredClone(
+            state.timeCfmPtEteAll,
           );
           break;
         case "Waiting time":
           state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
-          state.timeCfmWtEteAllDefault = JSON.parse(
-            JSON.stringify(state.timeCfmWtEteAll),
+          state.timeCfmWtEteAllDefault = structuredClone(
+            state.timeCfmWtEteAll,
           );
           break;
         case "Cycle time":
           state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
-          state.timeCfmCtEteAllDefault = JSON.parse(
-            JSON.stringify(state.timeCfmCtEteAll),
+          state.timeCfmCtEteAllDefault = structuredClone(
+            state.timeCfmCtEteAll,
           );
           break;
         default:
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index 8f12a2a..f4697ab 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -55,10 +55,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 = structuredClone(timeData.value.min);
+  minVuemax.value = structuredClone(timeData.value.max);
+  maxVuemin.value = structuredClone(timeData.value.min);
+  maxVuemax.value = structuredClone(timeData.value.max);
 }
 
 /**
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 56f7d8a..dbd186d 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -183,7 +183,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 = structuredClone(infiniteData.value); // Deep copy the original cases data
     data.forEach((item) => {
       item.facets.forEach((facet, index) => {
         item[`fac_${index}`] = facet.value; // Create a new key-value pair
@@ -201,7 +201,7 @@ const caseData = computed(() => {
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
+  const data = structuredClone(props.cases); // Deep copy the original cases data
   if (!data || data.length === 0) return [];
   const facetName = (facName) =>
     facName
diff --git a/src/components/Discover/Map/Filter/TraceFilter.vue b/src/components/Discover/Map/Filter/TraceFilter.vue
index 9594730..e6ddc82 100644
--- a/src/components/Discover/Map/Filter/TraceFilter.vue
+++ b/src/components/Discover/Map/Filter/TraceFilter.vue
@@ -228,7 +228,7 @@ const chartData = computed(() => {
 });
 
 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+  const data = structuredClone(infiniteData.value); // Deep copy the original cases data
   data.forEach((item) => {
     item.attributes.forEach((attribute, index) => {
       item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -239,7 +239,7 @@ const caseData = computed(() => {
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data
+  const data = structuredClone(baseCases.value); // Deep copy the original cases data
   let result = [
     { field: "id", header: "Case Id" },
     { field: "started_at", header: "Start time" },
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 8796761..6e16c57 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -164,7 +164,7 @@ const traceList = computed(() => {
 });
 
 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+  const data = structuredClone(infiniteData.value); // Deep copy the original cases data
   data.forEach((item) => {
     item.attributes.forEach((attribute, index) => {
       item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -175,7 +175,7 @@ const caseData = computed(() => {
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
+  const data = structuredClone(props.cases); // Deep copy the original cases data
   let result = [
     { field: "id", header: "Case Id" },
     { field: "started_at", header: "Start time" },
@@ -215,7 +215,7 @@ watch(showTraceId, (newValue, oldValue) => {
 
 watch(infiniteFirstCases, (newValue) => {
   if (infiniteFirstCases.value)
-    infiniteData.value = JSON.parse(JSON.stringify(newValue));
+    infiniteData.value = structuredClone(newValue);
 });
 
 /**
diff --git a/src/views/Files/FilesPage.vue b/src/views/Files/FilesPage.vue
index 10e4580..d3f7338 100644
--- a/src/views/Files/FilesPage.vue
+++ b/src/views/Files/FilesPage.vue
@@ -586,7 +586,7 @@ const isCompareDisabledButton = computed(() => {
 const reallyDeleteData = computed(() => {
   let result = [];
   if (store.allFiles.length !== 0) {
-    result = JSON.parse(JSON.stringify(store.allFiles));
+    result = structuredClone(store.allFiles);
     result = result.filter((file) => file.is_deleted === true);
   }
   return result;
@@ -602,7 +602,7 @@ watch(filesTag, (newValue) => {
 
 watch(allFiles, (newValue) => {
   if (newValue !== null)
-    compareData.value = JSON.parse(JSON.stringify(newValue));
+    compareData.value = structuredClone(newValue);
 });
 
 watch(