add infinity scroll

src/App.vue

@@ -18,12 +18,12 @@
 
     <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
     <post-list v-else :posts="sortedAndSearchedPosts" @removePost="removePost" class="postList"/>
-
-    <my-pagination
-      :currentPage="page"
-      :totalPages="totalPages"
-      @changePage="changePage"
-    />
+    <div ref="observer" class="observer"></div>
+<!--    <my-pagination-->
+<!--      :currentPage="page"-->
+<!--      :totalPages="totalPages"-->
+<!--      @changePage="changePage"-->
+<!--    />-->
   </div>
 </template>
 
@@ -80,14 +80,46 @@ export default {
         alert(e.message);
       }
     },
-    changePage(newPage) {
-      this.page = newPage;
+    async loadMorePost() {
+      this.page += 1
+      try {
+        const { data, headers } = await axios.get(`https://jsonplaceholder.typicode.com/posts`, {
+          params: {
+            _limit: this.limit,
+            _page: this.page,
           }
+        });
+        this.posts.push(...data);
+        this.totalPages = Math.ceil(headers['x-total-count'] / this.limit);
+      } catch (e) {
+        alert(e.message);
+      }
+    },
+    // changePage(newPage) {
+    //   this.page = newPage;
+    // }
   },
   async mounted() {
     this.isPostLoading = true;
     await this.fetchPosts()
     this.isPostLoading = false
+
+
+    console.log();
+
+    const options = {
+      rootMargin: "0px",
+      threshold: 1.0,
+    };
+
+    const callback = (entries) => {
+      if (entries[0].isIntersecting && this.page < this.totalPages) {
+        this.loadMorePost();
+      }
+    };
+    const observer = new IntersectionObserver(callback, options);
+
+    observer.observe(this.$refs.observer)
   },
   computed: {
     sortedPost() {
@@ -112,9 +144,9 @@ export default {
         document.body.style.overflow = 'auto';
       }
     },
-    page() {
-      this.fetchPosts()
-    }
+    // page() {
+    //   this.fetchPosts()
+    // }
   }
 }
 </script>
@@ -147,4 +179,9 @@ export default {
   .search {
     margin-top: 15px;
   }
+
+  .observer {
+    height: 0px;
+    background: teal;
+  }
 </style>