How do I prevent the webpage from infinite loading the same elements?

I want to display the movies only once, but after they've been mounted the onScroll method repeats, although there is removeEventListener. The onScroll method sets bool value for bottomOfWindow.

 if (bottomOfWindow) {
          this.nextMovieIds.forEach((movieId) => {
            axios
              .get("http://www.omdbapi.com/?i=" + movieId + "&apikey=2cbab1d9&")
              .then((response) => {
                this.$store.dispatch("addMovie", { movie: response.data });
                
              })
              .catch((err) => {
                console.log(err);
              });
          });
        }

  mounted() {
    this.$nextTick(function () {

      window.addEventListener("scroll", this.onScroll);
      this.onScroll(); 
    });

    if (this.$store.state.movies.length < 7) {
      this.nextMovieIds = [
        "tt0317919",
        "tt0298203",
        "tt0410097",
        "tt1057500",
        "tt0120591",
        "tt1504320",
        
      ];
    } else {
      this.nextMovieIds = [];
    }
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }