Fixed useTooltip for elements that already exist at setup

fe_calckey/frontend/client/src/scripts/use-tooltip.ts

@@ -66,15 +66,9 @@ export function useTooltip(
         close();
     };
 
-    const stop = watch(
+    const addListeners = () => {
-        elRef,
-        () => {
-            if (elRef.value) {
-                stop();
         const el =
-                    elRef.value instanceof Element
+            elRef.value instanceof Element ? elRef.value : elRef.value!.$el;
-                        ? elRef.value
-                        : elRef.value.$el;
         el.addEventListener("mouseover", onMouseover, {
             passive: true,
         });
@@ -86,13 +80,25 @@ export function useTooltip(
         });
         el.addEventListener("touchend", onTouchend, { passive: true });
         el.addEventListener("click", close, { passive: true });
+    };
+
+    // Can't use immediate, because of the self-reference of the watch stop handle
+    if (elRef.value) {
+        addListeners();
+    } else {
+        const stop = watch(
+            elRef,
+            () => {
+                if (elRef.value) {
+                    stop();
+                    addListeners();
                 }
             },
             {
-            immediate: true,
                 flush: "post",
             }
         );
+    }
 
     onUnmounted(() => {
         close();