diff --git a/eslint.config.mjs b/eslint.config.mjs
index 4439c0c..dd94eff 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -117,7 +117,7 @@ export default [
     files: ["src/**/*.vue", "src/views/**/*.vue", "src/components/**/*.vue"],
     rules: {
       "vue/multi-word-component-names": "off",
-      "vue/no-side-effects-in-computed-properties": "off",
+      "vue/no-side-effects-in-computed-properties": "error",
       "vue/return-in-computed-property": "error",
       "vue/no-parsing-error": "error",
       "vue/valid-v-else": "error",
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 3cb99c9..42b216f 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -96,7 +96,7 @@
             type="button"
             class="btn btn-sm"
             @click="submitConformance"
-            :class="isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
+            :class="isApplyBtnDisabled ? 'btn-disable' : 'btn-neutral'"
             :disabled="isApplyBtnDisabled"
           >
             {{ i18next.t("Global.Apply") }}
@@ -208,7 +208,6 @@ const {
 const { activityRadioData } = storeToRefs(conformanceInputStore);
 
 // data
-const isMainBtnDisabled = ref(true);
 const isShowBarOpen = ref(false);
 const selectConformanceTask = ref(null);
 const selectConformanceStartAndEnd = ref(null); // Activity sequence
@@ -386,8 +385,7 @@ const isApplyBtnDisabled = computed(() => {
       break;
   }
 
-  isMainBtnDisabled.value = disabledBool;
-  return isMainBtnDisabled.value;
+  return disabledBool;
 });
 
 // watch
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index a492a30..88814a2 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -433,17 +433,15 @@ const taskEnd = ref(null);
 
 // Activity sequence
 const cfmSeqStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataSeq.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataSeq?.task ?? null;
   return isEndSelected.value
-    ? setSeqStartAndEndData(cfmSeqEnd.value, "sources", task.value)
+    ? setSeqStartAndEndData(cfmSeqEnd.value, "sources", selectedTask)
     : cfmSeqStart.value.map((i) => i.label);
 });
 const cfmSeqEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataSeq.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataSeq?.task ?? null;
   return isStartSelected.value
-    ? setSeqStartAndEndData(cfmSeqStart.value, "sinks", task.value)
+    ? setSeqStartAndEndData(cfmSeqStart.value, "sinks", selectedTask)
     : cfmSeqEnd.value.map((i) => i.label);
 });
 // Processing time
@@ -454,17 +452,15 @@ const cfmPtEteEndData = computed(() => {
   return cfmPtEteEnd.value.map((i) => i.task);
 });
 const cfmPtEteSEStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataPtEte.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataPtEte?.task ?? null;
   return isEndSelected.value
-    ? setStartAndEndData(cfmPtEteSE.value, "end", task.value)
+    ? setStartAndEndData(cfmPtEteSE.value, "end", selectedTask)
     : setTaskData(cfmPtEteSE.value, "start");
 });
 const cfmPtEteSEEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataPtEte.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataPtEte?.task ?? null;
   return isStartSelected.value
-    ? setStartAndEndData(cfmPtEteSE.value, "start", task.value)
+    ? setStartAndEndData(cfmPtEteSE.value, "start", selectedTask)
     : setTaskData(cfmPtEteSE.value, "end");
 });
 const cfmPtPStartData = computed(() => {
@@ -474,17 +470,15 @@ const cfmPtPEndData = computed(() => {
   return cfmPtPEnd.value.map((i) => i.task);
 });
 const cfmPtPSEStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataPtP.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataPtP?.task ?? null;
   return isEndSelected.value
-    ? setStartAndEndData(cfmPtPSE.value, "end", task.value)
+    ? setStartAndEndData(cfmPtPSE.value, "end", selectedTask)
     : setTaskData(cfmPtPSE.value, "start");
 });
 const cfmPtPSEEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataPtP.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataPtP?.task ?? null;
   return isStartSelected.value
-    ? setStartAndEndData(cfmPtPSE.value, "start", task.value)
+    ? setStartAndEndData(cfmPtPSE.value, "start", selectedTask)
     : setTaskData(cfmPtPSE.value, "end");
 });
 // Waiting time
@@ -495,17 +489,15 @@ const cfmWtEteEndData = computed(() => {
   return cfmWtEteEnd.value.map((i) => i.task);
 });
 const cfmWtEteSEStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataWtEte.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataWtEte?.task ?? null;
   return isEndSelected.value
-    ? setStartAndEndData(cfmWtEteSE.value, "end", task.value)
+    ? setStartAndEndData(cfmWtEteSE.value, "end", selectedTask)
     : setTaskData(cfmWtEteSE.value, "start");
 });
 const cfmWtEteSEEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataWtEte.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataWtEte?.task ?? null;
   return isStartSelected.value
-    ? setStartAndEndData(cfmWtEteSE.value, "start", task.value)
+    ? setStartAndEndData(cfmWtEteSE.value, "start", selectedTask)
     : setTaskData(cfmWtEteSE.value, "end");
 });
 const cfmWtPStartData = computed(() => {
@@ -515,17 +507,15 @@ const cfmWtPEndData = computed(() => {
   return cfmWtPEnd.value.map((i) => i.task);
 });
 const cfmWtPSEStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataWtP.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataWtP?.task ?? null;
   return isEndSelected.value
-    ? setStartAndEndData(cfmWtPSE.value, "end", task.value)
+    ? setStartAndEndData(cfmWtPSE.value, "end", selectedTask)
     : setTaskData(cfmWtPSE.value, "start");
 });
 const cfmWtPSEEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataWtP.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataWtP?.task ?? null;
   return isStartSelected.value
-    ? setStartAndEndData(cfmWtPSE.value, "start", task.value)
+    ? setStartAndEndData(cfmWtPSE.value, "start", selectedTask)
     : setTaskData(cfmWtPSE.value, "end");
 });
 // Cycle time
@@ -536,17 +526,15 @@ const cfmCtEteEndData = computed(() => {
   return cfmCtEteEnd.value.map((i) => i.task);
 });
 const cfmCtEteSEStartData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataCt.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataCt?.task ?? null;
   return isEndSelected.value
-    ? setStartAndEndData(cfmCtEteSE.value, "end", task.value)
+    ? setStartAndEndData(cfmCtEteSE.value, "end", selectedTask)
     : setTaskData(cfmCtEteSE.value, "start");
 });
 const cfmCtEteSEEndData = computed(() => {
-  if (props.isSubmit && task.value === null)
-    task.value = props.isSubmitShowDataCt.task;
+  const selectedTask = task.value ?? props.isSubmitShowDataCt?.task ?? null;
   return isStartSelected.value
-    ? setStartAndEndData(cfmCtEteSE.value, "start", task.value)
+    ? setStartAndEndData(cfmCtEteSE.value, "start", selectedTask)
     : setTaskData(cfmCtEteSE.value, "end");
 });
 
diff --git a/src/components/Discover/Map/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue
index 5d2a400..7b08058 100644
--- a/src/components/Discover/Map/Filter/ActAndSeq.vue
+++ b/src/components/Discover/Map/Filter/ActAndSeq.vue
@@ -171,11 +171,10 @@ const lastItemIndex = ref(null);
 
 const data = computed(() => {
   // Sort the Activity List
-  filteredData.value = filteredData.value.sort((x, y) => {
+  return [...filteredData.value].sort((x, y) => {
     const diff = y.occurrences - x.occurrences;
     return diff !== 0 ? diff : sortNumEngZhtwForFilter(x.label, y.label);
   });
-  return filteredData.value;
 });
 
 watch(
diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue
index 07de323..54fdf6f 100644
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -103,13 +103,21 @@ const panelProps = ref({
 
 // user select time start and end
 const timeFrameStartEnd = computed(() => {
+  if (!startTime.value || !endTime.value) {
+    return [];
+  }
   const start = getMoment(startTime.value).format("YYYY-MM-DDTHH:mm:00");
   const end = getMoment(endTime.value).format("YYYY-MM-DDTHH:mm:00");
-  selectTimeFrame.value = [start, end]; // Data to send to the backend
 
   return [start, end];
 });
 
+watch(timeFrameStartEnd, (newValue) => {
+  if (newValue.length === 2) {
+    selectTimeFrame.value = newValue; // Data to send to the backend
+  }
+});
+
 // Compute slider data; time format: millisecond timestamps
 const sliderData = computed(() => {
   const xAxisMin = new Date(filterTimeframe.value.x_axis.min).getTime();
@@ -348,8 +356,6 @@ function changeSelectArea(e) {
   startMaxDate.value = new Date(end);
   // Recalculate the chart mask
   resizeMask(chart.value);
-  // Execute timeFrameStartEnd to update the data
-  timeFrameStartEnd.value;
 }
 
 /**
@@ -400,6 +406,5 @@ onMounted(() => {
   // Set the calendar range to match the timeline range
   startTime.value = startMinDate.value;
   endTime.value = startMaxDate.value;
-  timeFrameStartEnd.value;
 });
 </script>
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 494e710..27ff4f1 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -260,7 +260,7 @@
             class="btn btn-sm"
             @click="submit"
             :disabled="isDisabledButton"
-            :class="isDisabled ? 'btn-disable' : 'btn-neutral'"
+            :class="isDisabledButton ? 'btn-disable' : 'btn-neutral'"
           >
             Apply
           </button>
@@ -356,7 +356,6 @@ const isEndSelected = ref(null);
 const isActAllTask = ref(true);
 const rowData = ref([]);
 const selectTraceArea = ref([]); // Trace slider
-const isDisabled = ref(true); // Apply Button disabled setting
 const filterTraceViewRef = ref(null);
 const tooltip = {
   containment: {
@@ -426,7 +425,6 @@ const isDisabledButton = computed(() => {
     disabled = handleTimeframesSelection();
   }
 
-  isDisabled.value = disabled;
   return disabled;
 });