From 4f7bd3b77943cb03825c0689fdb361078491ad6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 5 Sep 2022 00:22:09 +0800
Subject: [PATCH 1/4] fix(useElementVisibility): watch the real element

relate #2160
---
 packages/core/useElementVisibility/index.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index 08c05c952ea..d54fe4d44c9 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -1,7 +1,8 @@
 import type { MaybeComputedRef } from '@vueuse/shared'
-import { resolveUnref, tryOnMounted } from '@vueuse/shared'
-import { ref } from 'vue-demi'
+import { tryOnScopeDispose } from '@vueuse/shared'
+import { ref, watch } from 'vue-demi'
 import type { MaybeComputedElementRef } from '../unrefElement'
+import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
@@ -28,7 +29,7 @@ export function useElementVisibility(
       return
 
     const document = window.document
-    const el = resolveUnref(element)
+    const el = unrefElement(element)
     if (!el) {
       elementIsVisible.value = false
     }
@@ -43,12 +44,16 @@ export function useElementVisibility(
     }
   }
 
-  tryOnMounted(testBounding)
+  const stop = watch(
+    () => unrefElement(element),
+    () => testBounding(),
+    { immediate: true, flush: 'post' },
+  )
 
-  if (window) {
-    tryOnMounted(() => useEventListener(
-      () => resolveUnref(scrollTarget) || window, 'scroll', testBounding, { capture: false, passive: true }))
-  }
+  if (window)
+    useEventListener(scrollTarget || window, 'scroll', testBounding, { capture: false, passive: true })
+
+  tryOnScopeDispose(() => stop())
 
   return elementIsVisible
 }

From cce1bc729482dd45cd3a9ae68987d3f1c4e59b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 5 Sep 2022 02:36:49 +0800
Subject: [PATCH 2/4] chore: format

---
 packages/core/useElementVisibility/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index d54fe4d44c9..167abffb006 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -50,8 +50,11 @@ export function useElementVisibility(
     { immediate: true, flush: 'post' },
   )
 
-  if (window)
-    useEventListener(scrollTarget || window, 'scroll', testBounding, { capture: false, passive: true })
+  if (window) {
+    useEventListener(scrollTarget || window, 'scroll', testBounding, {
+      capture: false, passive: true,
+    })
+  }
 
   tryOnScopeDispose(() => stop())
 

From 498ea1108bb3f540645eaddebcc9953aa25f9779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 5 Sep 2022 10:10:44 +0800
Subject: [PATCH 3/4] chore: remove redundant stop

---
 packages/core/useElementVisibility/index.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index 167abffb006..9deac8c6ef5 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -1,5 +1,4 @@
 import type { MaybeComputedRef } from '@vueuse/shared'
-import { tryOnScopeDispose } from '@vueuse/shared'
 import { ref, watch } from 'vue-demi'
 import type { MaybeComputedElementRef } from '../unrefElement'
 import { unrefElement } from '../unrefElement'
@@ -44,7 +43,7 @@ export function useElementVisibility(
     }
   }
 
-  const stop = watch(
+  watch(
     () => unrefElement(element),
     () => testBounding(),
     { immediate: true, flush: 'post' },
@@ -56,7 +55,5 @@ export function useElementVisibility(
     })
   }
 
-  tryOnScopeDispose(() => stop())
-
   return elementIsVisible
 }

From c85c2871eb8a7fe8754eda1fbd2d77f4c11660bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 5 Sep 2022 16:40:20 +0800
Subject: [PATCH 4/4] refactor: remove useless type assertion

---
 packages/core/useElementVisibility/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index 9deac8c6ef5..c716ee9be57 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -33,7 +33,7 @@ export function useElementVisibility(
       elementIsVisible.value = false
     }
     else {
-      const rect = (el as HTMLElement).getBoundingClientRect()
+      const rect = el.getBoundingClientRect()
       elementIsVisible.value = (
         rect.top <= (window.innerHeight || document.documentElement.clientHeight)
           && rect.left <= (window.innerWidth || document.documentElement.clientWidth)