'Emit data from Child to parent vue 3

I have a SearchBar.vue child page with a form in this this code :

      <template>
      <div>
        <form class="search-bar" @submit.prevent="SearchMovies()">
          <input
            type="text"
            placeholder="Effectuez une recherche"
            v-model="search"
          />
          <button
            type="submit"
            class="search-input"
            @click="$emit('get-movies', movies)"
          >
            CHERCHER
          </button>
        </form>
      </div>
    </template>

And my SearchMovies() function looks like :

    setup() {
        const search = ref("");
        const movies = ref([]);

        function SearchMovies () {

          if (search.value != "") {
            
            fetch(`${process.env.VUE_APP_API_URL_CALL_TWO}${search.value}`)
              .then((response) => response.json())
              .then((data) => {
                movies.value = data.contents;
                search.value = "";
                console.log(
                  "Movies data from SearchBar.vue when fired up: ",
                  movies.value
                );

              });
          }

          this.$emit('get-movies', movies)

        }

This is how I have tried to add the emit line

              this.$emit('get-movies', movies)

And I receive the emitted data from SearchMovies() function to my parent Home.vue page like this :

    <template>

      <div>
        <router-link to="/" href="/"
          ><img class="logo-img" alt="App logo" src="../assets/logo.png"
        /></router-link>

        <SearchBar @get-movies="getMovies($event)" />

        <MovieList :movies="movies" />
      </div>
    </template>
      methods: {
        getMovies: function (movies) {
          (this.movies = movies),
            console.log("Movies data from Home.vue when fired up: ", 
            movies);
        },
      },

The problem is that I am not getting the movies data and when I console.log it in the Home.vue page

    Movies data from Home.vue when fired up:  Proxy {}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source