vuejs change item on scroll

1<!-- If you don't use Tailwind, use css classes in <script></script> -->
2
3<template>
4  <div v-bind:class="darkMode ? darkModeBodyClass : 'transition ease-out duration-700'">
5    <main>
6      <router-view :darkMode="darkMode">
7      </router-view>
8    </main>
9  </div>
10</template>
11
12<script>
13  export default {
14    data() {
15      return {
16        darkMode: false,
17        darkModeBodyClass: 'transition ease-out duration-700 bg-black text-white'
18      }
19    },
20    methods: {
21      switchToDarkMode() {
22        if (window.scrollY > 80) {
23          this.darkMode = true;
24        } else {
25          this.darkMode = false;
26        }
27      }
28    },
29    mounted() {
30      window.addEventListener('scroll', () => {
31        this.switchToDarkMode()
32      })
33    }
34  };
35</script>