Scroll itemChange event only fired once

[mainrs]

My website does hide the overflow on the first div element and only enables it on the scrollable content (not the header for example).

The thing is, the scroll event does only get fired once. The selector is right, as it does select the scrollable div. But it doesn't re-fire for some reason.

Here is a screenshot of the layout. The first highlighted element is the scrollable div, identified as #scroller. You can see that the overflow has been changed in the attribute section. The second highlighted element is the scrollactive nav. All links inside of it have the scrollactive-item class applied.

I set the component up the following way:

<template>
<scrollactive
      v-bind:alwaysTrack="true"
      scrollContainerSelector="#scroller"
      class="flex flex-col justify-between"
      @itemchanged="onItemChanged"
    >
      <a href="#home" class="scrollactive-item mt-64">Home</a>
      <a href="#about-us" class="scrollactive-item mt-64">About Us</a>
      <a href="#portfolio" class="scrollactive-item mt-64">Portfolio</a>
      <a href="#contact" class="scrollactive-item mt-64">Contact</a>
    </scrollactive>
</template>

<script>
export default {
  methods: {
    onItemChanged(event, currentItem, lastItem) {
      console.log(event)
      console.log(currentItem)
      console.log(lastItem)
    },
  },
}
</script>

The #scroller is not part of the same Vue component. The Vue component that contains the #scroller element actually uses the Cue component that wraps the above code. So it's basically:

<div id="#scroller">
    <above-component-that-contains-scrollactive-element />
</div>

Any help is appreciated! I really can't figure out why this isn't working :(