Vue2 - Event does not fire when hitting the end of a horizontal scroll in Chromium on Windows 11

I've been trying to find a solution for this but to no avail. The project uses Vue2.

I have a container (HorizontalScrollBoard.vue) with a horizontal scroll inside, that can hold elements within it. Upon scrolling the @scroll.passive event gets triggered and emits a load-more event:

<template>
  <div @scroll.passive="$emit('load-more', $event)">
    <div>
      <!-- @slot *Provides a place for the content.* -->
      <slot />
    </div>
  </div>
</template>

When using the HorizontalScrollBoard.vue it renders with a few default elements inside, and the combined width of those elements is always longer than the width of the container, so a horizontal scrollbar is always present on first render. The idea is that when the scroll hits the end of the container to the right, it will trigger the load-more handler and will fetch more elements.

<HorizontalScrollBoard @load-more="handleHorizontalScrollEvent($event)">
  <element />
  <element />
  <element />
  <div v-if="fetchedQuotes && fetchedQuotes.length">
    <element v-for="(quote, i) in fetchedQuotes" :key="`${quote.id}-${i}`" />
  </div>
</HorizontalScrollBoard>

The starting data:

data() {
  return {
    fetchedQuotes: [],
    loadingQuotes: false,
  };
},

The handler that checks if you've hit the end of the scroll to the right, and calls a method if so:

handleHorizontalScrollEvent(event) {
  if (
    event.target.scrollLeft + event.target.offsetWidth === event.target.scrollWidth
    && !this.loadingQuotes
  ) {
    this.loadInsightQuotes();
  }
},

The method that gets called from the handler, which fetches more elements:

async loadInsightQuotes() {
  try {
    this.loadingQuotes = true;

    const response = await this.$api('studies').getInsightQuotes();

    this.fetchedQuotes = [...this.fetchedQuotes, ...response.data];
  } catch (e) {
    this.$errorHandler(e);
  } finally {
    this.loadingQuotes = false;
  }
},

This gets fired in every browser on Mac, in every browser on Linux, and in every non-chromium browser on Windows. However Chromium browsers on Windows will not trigger the handleHorizontalScrollEvent() or loadInsightQuotes() not sure which one. No errors are present in the console apart from two warnings:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. 
Consider marking event handler as 'passive' to make the page more responsive.

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 
Consider marking event handler as 'passive' to make the page more responsive. 

As you can see the @scroll handler inside HorizontalScrollBoard.vue has a .passive param so not sure what Chrome wants. Any ideas will be much appreciated. If the provided info doesn't help to understand the problem I'd gladly give more, I've tried to simplify it as much as possible.

Thank you all!