refactor: remove redundant watcher cleanup in Vue comps

Removes unnecessary manual watcher cleanup via stopWatchQueryChange across multiple Vue components.

Vue 3's watch() automatically handles cleanup when components are unmounted, making explicit stopWatchQueryChange calls and onBeforeUnmount handlers redundant.

This change:
- Improves code maintainability
- Reduces boilerplate code
- Follows Vue 3 best practices for reactive system cleanup

app/components/dashboard/analysis/Counters.vue

@@ -26,17 +26,13 @@ async function getLinkCounters() {
   counters.value = data?.[0]
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkCounters, {
+watch([time, filters], getLinkCounters, {
   deep: true,
 })
 
 onMounted(async () => {
   getLinkCounters()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>

app/components/dashboard/analysis/Views.vue

@@ -51,7 +51,7 @@ async function getLinkViews() {
   })
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkViews, {
+watch([time, filters], getLinkViews, {
   deep: true,
 })
 
@@ -59,10 +59,6 @@ onMounted(async () => {
   getLinkViews()
 })
 
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
-
 function formatTime(tick) {
   if (Number.isInteger(tick) && views.value[tick]) {
     if (getUnit(time.value.startAt, time.value.endAt) === 'hour')

app/components/dashboard/analysis/metrics/Locations.vue

@@ -33,7 +33,7 @@ async function getMapData() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getMapData, {
+watch([time, filters], getMapData, {
   deep: true,
 })
 
@@ -42,10 +42,6 @@ onMounted(() => {
   getMapData()
 })
 
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
-
 const valueFormatter = v => v
 const Tooltip = {
   props: ['title', 'data'],

app/components/dashboard/analysis/metrics/Metric.vue

@@ -45,17 +45,13 @@ async function getLinkMetrics() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkMetrics, {
+watch([time, filters], getLinkMetrics, {
   deep: true,
 })
 
 onMounted(() => {
   getLinkMetrics()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>

app/components/dashboard/realtime/Chart.vue

@@ -20,17 +20,13 @@ async function getRealtimeStats() {
   stats.value = data?.[0] || {}
 }
 
-const stopWatchQueryChange = watch([time, filters], getRealtimeStats, {
+watch([time, filters], getRealtimeStats, {
   deep: true,
 })
 
 onMounted(async () => {
   getRealtimeStats()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>

app/components/dashboard/realtime/Globe.vue

@@ -104,7 +104,7 @@ function stopRotation() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getLiveLocations, {
+watch([time, filters], getLiveLocations, {
   deep: true,
 })
 
@@ -125,10 +125,6 @@ onMounted(async () => {
   await Promise.all([getGlobeJSON(), getLiveLocations()])
   initGlobe()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>

app/components/dashboard/realtime/Logs.vue

@@ -19,17 +19,13 @@ async function getEvents() {
   logskey.value = Date.now()
 }
 
-const stopWatchQueryChange = watch([time, filters], getEvents, {
+watch([time, filters], getEvents, {
   deep: true,
 })
 
 onMounted(async () => {
   getEvents()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>