title: Iterating through response.data not working as expected
body: <p>Lets say my response.data is:</p>
  <pre><code>{
      &quot;data&quot;: {
          &quot;person1&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              }
          ],
          &quot;person2&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              }
          ],
          &quot;person3&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              }
          ]
      }
  }
  </code></pre>
  <p>If I wanted to add a <code>gender</code> field to each person, I try to do it via the map function like this:</p>
  <pre><code>axios
      .get('...')
      .then(response =&gt; (this.people = [response.data].map(person =&gt; {
          person.gender = &quot;&quot;;
          return person;
      })))
  </code></pre>
  <p>This adds only one <code>gender</code> field to the <code>response.data</code> and not to each person. What am doing wrong?</p>
  <p>My desired result would be like:</p>
  <pre><code>{
      &quot;data&quot;: {
          &quot;person1&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              },
              gender: &quot;&quot;
          ],
          &quot;person2&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              },
              gender: &quot;&quot;
          ],
          &quot;person3&quot;: [
              {
                  &quot;name&quot;: ....
                  &quot;age&quot;: xx
              },
              gender: &quot;&quot;
          ]
      }
  }
  </code></pre>