observer mixin for nuxtjs

observer.js

export default {
  data() {
    return { isShown: false, isActive: false, boundingClientRect: {} }
  },
  methods: {
    intersectionCb(entries) {
      if (entries[0].intersectionRatio > 0) {
        this.isShown = true
        this.isActive = true
        this.boundingClientRect = entries[0].boundingClientRect
      }
      if (entries[0].intersectionRatio <= 0) {
        this.isActive = false
      }
    },
  },
  beforeDestroy() {
    if (this.observer) this.observer.unobserve(this.$el)
  },
  mounted() {
    this.observer = new IntersectionObserver(this.intersectionCb, {})
    this.observer.observe(this.$el)
  },
}