From 8f8d04ea4c67a43aaccc689e3aa94165c0df86e2 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Thu, 11 Jul 2024 15:53:53 +0200
Subject: [PATCH] Do not use watch inside onMount

(thanks @hissalht)

See https://vuejs.org/guide/essentials/watchers#stopping-a-watcher
---
 .../src/pages/audit/AuditGenerationPage.vue   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index ca27dfd1..23aa84fe 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { sortBy } from "lodash-es";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { onBeforeRouteLeave, useRoute } from "vue-router";
 
 import AraTabs from "../../components/audit/AraTabs.vue";
@@ -157,17 +157,16 @@ const auditGenerationHeader = ref<InstanceType<
 
 const stickyTop = ref<string>("0");
 let resizeObserver: ResizeObserver | null = null;
-onMounted(async () => {
-  // Because auditGenerationHeader ref is inside a "v-if",
-  // Vue will not instantiate the ref immediately.
-  // We need to watch it before observing nested stickyIndicator
-  watch(auditGenerationHeader, async () => {
-    const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
-    resizeObserver = new ResizeObserver((entries) => {
-      stickyTop.value = entries[0].target.clientHeight + "px";
-    });
-    stickyIndicator && resizeObserver.observe(stickyIndicator);
+
+// Because auditGenerationHeader ref is inside a "v-if",
+// Vue will not instantiate the ref immediately.
+// We need to watch it before observing nested stickyIndicator
+watch(auditGenerationHeader, async () => {
+  const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
+  resizeObserver = new ResizeObserver((entries) => {
+    stickyTop.value = entries[0].target.clientHeight + "px";
   });
+  stickyIndicator && resizeObserver.observe(stickyIndicator);
 });
 
 onBeforeUnmount(() => {