From 6a32dc1c9edbed4248b08e9513092025318bbc56 Mon Sep 17 00:00:00 2001
From: Michael Brevard <yonshi29@gmail.com>
Date: Sun, 24 Mar 2024 19:52:16 +0200
Subject: [PATCH] fix: client-io-component.ts

---
 .../components/runtime/client-io-component.ts | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/nuxt/src/components/runtime/client-io-component.ts b/packages/nuxt/src/components/runtime/client-io-component.ts
index 6403e3e211..cb941d8aab 100644
--- a/packages/nuxt/src/components/runtime/client-io-component.ts
+++ b/packages/nuxt/src/components/runtime/client-io-component.ts
@@ -1,26 +1,32 @@
-import { defineComponent, ref } from "vue"
+import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
+
 export default defineComponent({
-  emits: ['intersected'],
-  setup() {
-    const data = ref(null);
-    const isIntersecting = ref(false);
-    const target = ref(null);
-    let observer: Ref<IntersectionObserver | null> = ref(null)
-    onMounted(() => {
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            isIntersecting.value = true;
-            emit('intersected');
-            observer.unobserve(target.value);
-          }
-        });
+  setup(props, { emit }) {
+    const intersectionTarget = ref(null);
+    let observer = null;
+
+    const intersectionCallback = (entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          emit('intersect');
+          observer.unobserve(entry.target);
+        }
       });
-      observer.observe(target.value);
+    };
+
+    onMounted(() => {
+      observer = new IntersectionObserver(intersectionCallback);
+      observer.observe(intersectionTarget.value);
+    });
+
+    onUnmounted(() => {
+      if (observer) {
+        observer.disconnect();
+      }
     });
 
     return {
-      isIntersecting
+      intersectionTarget
     };
   }
 });