Observer component for vue js

observer.js

<!-- Observer.vue -->
<template>
  <div class="observer"/>
</template>

<script>
export default {
  data: () => ({
    observer: null,
  }),
  mounted() {
    this.observer = new IntersectionObserver(([entry]) => {
      if (entry && entry.isIntersecting) {
        this.$emit("intersect");
      }
    });

    this.observer.observe(this.$el);
  },
  destroyed() {
    this.observer.disconnect();
  },
};
</script>

How to use in component
<!-- intersectionobserver -->
<observer @intersect="loadPosts" v-if="!showSearch"/>
<!-- intersectionobserver -->