vue set scroll position in mounted code example

Example: vuejs change item on scroll

<!-- If you don't use Tailwind, use css classes in <script></script> -->

<template>
  <div v-bind:class="darkMode ? darkModeBodyClass : 'transition ease-out duration-700'">
    <main>
      <router-view :darkMode="darkMode">
      </router-view>
    </main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        darkMode: false,
        darkModeBodyClass: 'transition ease-out duration-700 bg-black text-white'
      }
    },
    methods: {
      switchToDarkMode() {
        if (window.scrollY > 80) {
          this.darkMode = true;
        } else {
          this.darkMode = false;
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', () => {
        this.switchToDarkMode()
      })
    }
  };
</script>