Add a Class if element is in viewport vuejs nuxt

I want give an element a class when it's in the viewport and I don't know how I can handle it. I watched a few Videos on Youtube but nothing helped me.
I work with a boilerplate so I can't implement additional plugins.

My script looks actually like this.

export default {
  head() {
    return {
      title: this.$t("headData.index.title"),
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.$t("headData.index.description")
        }
      ]
    }
  },
  data() {
    return {
      debugSingleScroll: true,
    }
  },
  methods: {
    handleScroll() {
      if(this.debugSingleScroll) {
        this.scrollToNextModule()
        this.scrollToLastModule()
        this.debugSingleScroll = false; 
      }
    },
    scrollToNextModule() {
      this.$refs.factsModule.triggerAnimation();
    },
    scrollToLastModule() {
    },
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
}