screen.js

import { onMounted, onUnmounted, ref } from "@vue/composition-api";

export function useOnScreen() {
  let isOnScreen = ref(false);

  const observer = new IntersectionObserver(entries => {
    isOnScreen.value = entries.some(entry => entry.intersectionRatio > 0);
  });

  onMounted(function() {
    observer.observe(this.$el);
  });

  onUnmounted(function(vm) {
    observer.unobserve(this.$el);
  });

  return {
    isOnScreen,
    observer
  };
}