title: Can't merge two array of object
body: <p>I want to merge two arrays of objects that I receive from a call to an API (<a href="https://developers.themoviedb.org/3/getting-started/introduction" rel="nofollow noreferrer">https://developers.themoviedb.org/3/getting-started/introduction</a> this one).
  I've created this simple function in <code>methods</code> to merge two arrays in Vue, but every time I obtain an empty array</p>
  <pre><code>mergeArrays(arr1, arr2) {
            let arrMerged = [...arr1, ...arr2];
            return arrMerged;
      }
  </code></pre>
  <p>So, I thought the problem was maybe the asynchronous call. So, to be sure the arrays were filled before return something, I put this if statement, but I don't obtain anything, the function doesn't start.</p>
  <pre><code>mergeArrays(arr1, arr2) {
            if (arr1.length == 19 &amp;&amp; arr2.length == 16 ) {
                let arrMerged = [...arr1, ...arr2];
                return arrMerged;
            }
          }
  </code></pre>
  <p>The arrays are obtained this way:</p>
  <pre><code> mounted () {
          // First Array
          // Obtaine movies genres and put them in an re-usable array 
          axios
              .get(`https://api.themoviedb.org/3/genre/movie/list`, {
                  params: {
                              api_key: this.apiKey,
                              language: this.userLanguage,
                          },
              })
              .then((response) =&gt; {
                  const genres = response.data.genres;
                  genres.forEach(element =&gt; {
                      let genreId = element.id;
                      let genreName = element.name;
                      this.genresMovies.push( 
                          {
                              id: genreId, 
                              name: genreName
                          }
                      );
                  });
              })
  
      // Second Array
      // Obtaine tv genres and put them in an re-usable array 
      axios
          .get(` https://api.themoviedb.org/3/genre/tv/list`, {
              params: {
                          api_key: this.apiKey,
                          language: this.userLanguage,
                      },
          })
          .then((response) =&gt; {
              const genres = response.data.genres;
              genres.forEach(element =&gt; {
                  let genreObj = element;
                  let genreId = element.id;
                  let genreName = element.name;
                          this.genresTV.push( 
                          {
                              id: genreId, 
                              name: genreName
                          }
                      );
              });
          })
  </code></pre>
  <p><code>this.genresTV</code> and <code>this.genresMovies</code> are empty array defined in <code>data</code> and filled here.
  Once filled they appear this way:</p>
  <pre><code>Array 1
  
  0:
  id: 28
  name: &quot;Azione&quot;
  
  1:
  id: 12
  name: &quot;Avventura&quot;
  
  2:
  id: 16
  name: &quot;Animazione&quot;
  
  3:
  id: 35
  name: &quot;Commedia&quot;
  
  4:
  id: 80
  name: &quot;Crime&quot;
  
  5:
  id: 99
  name: &quot;Documentario&quot;
  
  6:
  id: 18
  name: &quot;Dramma&quot;
  
  7:
  id: 10751
  name: &quot;Famiglia&quot;
  
  8:
  id: 14
  name: &quot;Fantasy&quot;
  
  9:
  id: 36
  name: &quot;Storia&quot;
  
  10:
  id: 27
  name: &quot;Horror&quot;
  
  11:
  id: 10402
  name: &quot;Musica&quot;
  
  12:
  id: 9648
  name: &quot;Mistero&quot;
  
  13:
  id: 10749
  name: &quot;Romance&quot;
  
  14:
  id: 878
  name: &quot;Fantascienza&quot;
  
  15:
  id: 10770
  name: &quot;televisione film&quot;
  
  16:
  id: 53
  name: &quot;Thriller&quot;
  
  17:
  id: 10752
  name: &quot;Guerra&quot;
  
  18:
  id: 37
  name: &quot;Western&quot;
  
  
  Array 2
  
  0:
  id: 10759
  name: &quot;Action &amp; Adventure&quot;
  
  1:
  id: 16
  name: &quot;Animazione&quot;
  
  2:
  id: 35
  name: &quot;Commedia&quot;
  
  3:
  id: 80
  name: &quot;Crime&quot;
  
  4:
  id: 99
  name: &quot;Documentario&quot;
  
  5:
  id: 18
  name: &quot;Dramma&quot;
  
  6:
  id: 10751
  name: &quot;Famiglia&quot;
  
  7:
  id: 10762
  name: &quot;Kids&quot;
  
  8:
  id: 9648
  name: &quot;Mistero&quot;
  
  9:
  id: 10763
  name: &quot;News&quot;
  
  10:
  id: 10764
  name: &quot;Reality&quot;
  
  11:
  id: 10765
  name: &quot;Sci-Fi &amp; Fantasy&quot;
  
  12:
  id: 10766
  name: &quot;Soap&quot;
  
  13:
  id: 10767
  name: &quot;Talk&quot;
  
  14:
  id: 10768
  name: &quot;War &amp; Politics&quot;
  
  15:
  id: 37
  name: &quot;Western&quot;
  </code></pre>
  <p>I call the function this way in mounted after the second <code>axios</code></p>
  <pre><code>const arr = this.mergeArrays(this.genresMovies, this.genresTV);
  </code></pre>
  <p>I can't figure out what's wrong</p>