javascript - How do I set nested object entries coming from an api?

Question

I got an object where I keep track of several things that the user can fill out, delete, update, etc.

Now, when 'loading' such a project, I make an api call to my backend using axios to retrieve the specific data to send it back to the client. The api call looks like this:

axios.get(`/api/data/${this.$route.params.dataId}`)
  .then((response) => {

    //Why does this not work?
    this.nestedObject = response.data.object

    //This DOES work... Why?
    this.nestedObject.recipes = response.data.object.recipes
    this.nestedObject.cheffs= response.data.object.cheffs
  })
  .catch((err) => {
    console.log("error retrieving data: ", err);
  });

Whenever I just set this.nestedObject equal to the data that is coming from the server, it does not work. nestedObject is not updated with the new values. But when I set the individual entries in the object equal to the data that is coming from the server, it does work and nestedObject is updated appropriately. Why is that?

question from:https://stackoverflow.com/questions/66049289/how-do-i-set-nested-object-entries-coming-from-an-api

Answer 1

Waitting for answers