Как определить, когда пользователь прокручивает нижнюю часть div-Vue

В настоящее время я пытаюсь реализовать бесконечную прокрутку на своем веб-сайте, я использую Vue Framework. Есть несколько бесконечных загрузочных библиотек для Vue, но после их интеграции у них было несколько проблем, которые были слишком серьезными для меня.

У меня уже есть это, поэтому я могу добавить больше данных в массив, как только определенное условие будет выполнено, мне просто нужно быть в состоянии определить, когда нижняя часть div будет достигнута/прокручена вниз.

Мне действительно нужно интегрировать это с циклом for в Vue, хотя это, кажется, не работает с некоторыми общими решениями. По сути, именно так выглядит мой код.

<div id="container">
    <div v-for="object in objects">
        <div class="class123">
            <p>Display Stuff</p>
        </div>
    </div>
</div>

Как бы я мог определить, когда пользователь прокручивает вниз к нижней части контейнера? Я попробовал, и это сработало без Vue, но как только я добавляю Vue, кажется, что это не работает:

jQuery(function($) {
    $('#container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

Я был бы признателен за помощь, спасибо.