:recycle: trying intersection on load and on route change

vue-theme/src/pages/list.vue

     data() {
         return {
             page: 1,
-            perPage: 10
+            perPage: 9
         }
     },
     computed: {
                 location.href = hashtag
             }, TIMEOUT)
         },
+        setIntersectionLoader() {
+            window.removeEventListener("load", e => {}, false)
+            window.addEventListener("load", e => {
+                const footerEl = document.querySelector(".footer-wrapper footer")
+                const observer = new IntersectionObserver(this.loadMorePosts, {
+                    rootMargin: "0px 0px 20px 0px",
+                })
+                observer.observe(footerEl)
+            }, false)
+        }
     },
     watch: {
         posts() {
             if (!this[`all${type}Loaded`] || sort) this.getPosts(true)
 
             // Add the infinite scroll load
-            window.removeEventListener("load", e => {}, false)
-            window.addEventListener("load", e => {
-                const footerEl = document.querySelector(".footer-wrapper footer")
-                const observer = new IntersectionObserver(this.loadMorePosts, {
-                    rootMargin: "0px 0px -20px 0px",
-                })
-                observer.observe(footerEl)
-            }, false)
+            this.setIntersectionLoader()
         },
     },
     mounted() {
         if (this.$route.hash) {
             setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
         }
+        this.setIntersectionLoader()
     },
     created() {
         let type = convertTitleCase(this.type) + 's'