Firing properly but no data returned on extended fetch

src/components/InfiniteScroll.vue

@@ -10,40 +10,52 @@ import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
 
 @Component
 export default class InfiniteScroll extends Vue {
-  @Prop({ default: 100 })
+  @Prop({ default: 200 })
   readonly distance!: number;
   private observer!: IntersectionObserver;
-  private isInitialized = false;
+  private isInitialRender = true;
 
-  mounted() {
-    this.$nextTick(() => {
-      this.isInitialized = true;
-      console.log("onMounted");
+  updated() {
+    console.log("updated()");
+    if (!this.observer) {
       const options = {
-        root: this.$refs.scrollContainer as HTMLElement,
+        root: null,
         rootMargin: `0px 0px ${this.distance}px 0px`,
         threshold: 1.0,
       };
       this.observer = new IntersectionObserver(
-        (entries) => this.handleIntersection(entries),
+        this.handleIntersection,
         options
       );
       this.observer.observe(this.$refs.sentinel as HTMLElement);
-    });
+    }
   }
 
   beforeUnmount() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   @Emit("reached-bottom")
   handleIntersection(entries: IntersectionObserverEntry[]) {
     console.log("handleIntersection");
-    if (!this.isInitialized) {
-      return false;
-    }
     const entry = entries[0];
-    if (entry.isIntersecting && entry.intersectionRatio > 0) {
+    if (entry.isIntersecting) {
+      const distance = entry.boundingClientRect.top - entry.rootBounds.top;
+      console.log("distance: ", distance);
+      console.log("intersectionRatio", entry.intersectionRatio);
+      const sentinelPosition = (
+        this.$refs.sentinel as HTMLElement
+      ).getBoundingClientRect();
+      // Access sentinel element's position properties
+      const sentinelTop = sentinelPosition.top;
+      console.log("sentinelTop", sentinelTop);
+      const scrollContainer = (
+        this.$refs.scrollContainer as HTMLElement
+      ).getBoundingClientRect();
+      // Access scrollContainer properties or perform any necessary actions
+      console.log("scrollContainerTop", scrollContainer);
       return true;
     }
     return false;