IntersectionObserver keeps stopping at the same entry, infinite scrolling doesn't work

Question

I'm using TheMovieDatabase API, and I'm making a movie website. I want to load the Top Rated Movies, but the intersectionobserver method I added just keeps stopping at the same movie. Any help would be highly appreciated.

<template>
  <h1>{{ this.categoryName }}</h1>

  {{ console.log(this.tableData) }}
  <MovieTable :table-data="this.tableData"></MovieTable>
</template>


<script>
import MovieTable from "../components/MovieTable.vue";
import axios from "axios";
import config from "@/config";

export default {
  components: {
    MovieTable
  },
  data() {
    return {
      categoryName: this.$t("TopRatedCategoryName"),
      movies: [],
      pageNumber: 0,
      loading: false,
    };
  },
  methods: {
    async getNowPlaying() {
      this.loading = true;
      this.pageNumber += 1;
      try {
        const response = await axios.get(
            `${config.TMDB_BASE_URL}/movie/${this.categoryName.toLocaleLowerCase().replace(" ", "_")}?api_key=${config.TMDB_API_KEY}&language=en-US&page=${this.pageNumber}`
      );
        this.movies = this.movies.concat(response.data.results);
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
  },

  mounted() {
    this.getNowPlaying();

    this.observer = new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting && !this.loading) {
              this.getNowPlaying();
            }
          });
        },
        {threshold: 0.1}
    );

    this.observer.observe(document.getElementById('observer'));
  },
  beforeUnmount() {
    this.observer.unobserve(document.getElementById('observer'));
  },
};


</script>

I tried adding console.logs, but they werent showing in the browser console.