<div class="app__land-bottom" v-if="isVisible">
  <a href="#projects">
    <img ref="arrowRef" id="arrow" src="./../assets/down.png" alt srcset />
  </a>
</div>

In Vue3 setup isn't working, but on Vue2 is working the following solution for not displaying a button based on scrolling.

VUE3
<script setup>
import { ref, onMounted, onUnmounted } from "vue";

let isVisible = ref(false);

onMounted(() => {
  window.addEventListener("scroll", () => {
    hideArrow();
  });
});

onUnmounted(() => {
  window.removeEventListener("scroll", () => {
    hideArrow();
  });
});

const hideArrow = () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 100) {
    isVisible = false;
  } 
  else if (currentScroll < 100) {
    isVisible = true;
  }
}
</script>

VUE2
<script>
export default {
  created() {
    window.addEventListener('scroll', this.hideArrow)
  },
  data() {
    return {
      isVisible: false, 
    }
  },
  methods: {
    hideArrow() {
      const currentScroll = window.pageYOffset;
      if (currentScroll > 100) {
        this.isVisible = false;
      } else if (currentScroll < 100) {
        this.isVisible = true;
      }
    },
  },
}
</script>

In vue2 the solution is working but on Vue3, not. Any suggestions? I don't understand exactly where the problem is? It would be helpful an answer.