VueJs: прокрутка не работает через некоторое время

Question

Есть мобильный сайт, над которым я сейчас работаю, который использует VueJs в качестве внешнего интерфейса и Laravel в качестве внутреннего.

Для процесса электронной коммерции мне нужно загрузить товары в соответствии с выбранным магазином и загрузить отфильтрованные товары, используя ту же функцию.

Я использую функцию прокрутки внутри vue Компонент, как показано ниже,

bindScroll: function () {
    let self = this;
    window.addEventListener("scroll", function () {
      var hT = $('#loadingMorePost').offset().top,
        hH = $('#loadingMorePost').outerHeight(),
        wH = $(window).height(),
        wS = $(window).scrollTop();

      let val = wS + 250;
      if (val > (hT + hH - wH)) {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
          if (self.is_product_empty === false) {
            self.page += 1;
            self.loadPostOnScroll();
            self.haveMorePosts = true;
          }
        }
      }
    })
  },

loadPostOnScroll: function () {
        var vm = this;
        if (vm.store_products.length > 0) {
          var x = this.to;
          var z = x + 10;
          vm.to = z;
          vm.getProducts();
        }

      }

Div id="loadingMorePost" включает нижнюю панель навигации, которая используется для фильтрации продуктов по категориям

, использовала @onscroll для загрузка продукта

<div @onscroll="loadPostOnScroll"></div>

Функция getProducts() возвращает данные о продукте. Я также использовал ту же функцию для фильтрации продуктов (продукты должны загружаться в соответствии с выбранной пользователем категорией).

Прокрутка работает нормально в соответствии с требованиями. Но когда я использую мобильный сайт в течение 10-12 минут, он внезапно перестает работать при фильтрации продуктов. Функция getProducts() не вызывается после прокрутки пользователем до нижней части страницы.

Но она прекрасно работает после обновления страницы sh. Какое решение может быть для этого?