fix: client-io-component.ts

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(props, { emit }) {
-  setup() {
+    const intersectionTarget = ref(null);
-    const data = ref(null);
+    let observer = null;
-    const isIntersecting = ref(false);
+
-    const target = ref(null);
+    const intersectionCallback = (entries) => {
-    let observer: Ref<IntersectionObserver | null> = ref(null)
+      entries.forEach(entry => {
-    onMounted(() => {
+        if (entry.isIntersecting) {
-      const observer = new IntersectionObserver(entries => {
+          emit('intersect');
-        entries.forEach(entry => {
+          observer.unobserve(entry.target);
-          if (entry.isIntersecting) {
+        }
-            isIntersecting.value = true;
-            emit('intersected');
-            observer.unobserve(target.value);
-          }
-        });
       });
-      observer.observe(target.value);
+    };
+
+    onMounted(() => {
+      observer = new IntersectionObserver(intersectionCallback);
+      observer.observe(intersectionTarget.value);
+    });
+
+    onUnmounted(() => {
+      if (observer) {
+        observer.disconnect();
+      }
     });
 
     return {
-      isIntersecting
+      intersectionTarget
     };
   }
 });