Vue3 отображение элементов в зависимости от скролла

Пишу лендинг. в нём есть стрелочка внизу экрана, которая, по требованию заказчика, должна скрываться во время скролла, появляться при остановке скролла, и скрываться при достижении подвала. пока я смог достучаться до события scroll таким образом

mounted() {
    window.addEventListener('scroll', this.onScrollEnd);
  },

  methods: {
    onScrollEnd() {
      if (window.scrollY > 3285) {
        this.$refs.arrow.classList.add('isHidden');
      } else {
        this.$refs.arrow.classList.remove('isHidden');
      }
    },
  },

  destroyed() {
    window.removeEventListener('scroll', this.onScroll);
  }

оно работает, но что не устраивает:

1. момент срабатывания метода прописан хардкодом. тоесть, при изменении разрешения или масштаба точка срабатывания будет плавать
2. как слушать именно процесс скроллинга я пока понять не могу...

я нашёл библиотеку VueUse, и она должна решить все мои проблемы, но импортировать её в компонент никак не получается, браузер сыплет ошибками... (Module parse failed: Unexpected token)