When working with Vue 3 and mutating a prop that is an object (I understand it's not recommended to mutate props directly, but in this case it works because it's passed by reference as an object), I noticed that the changes reflect in the Vue Dev-Tools which is really helpful.
However, when making multiple axios calls and resolving promises, I observed that the prop does not update in the Vue Dev-Tools. Strangely though, if I console.log the prop, I can see all the updated data.
So, my question is: How can I ensure that Vue Dev-Tools reflects the updates after resolving async promises? It becomes challenging to debug when the props are not syncing properly.
export default {
props: {
translation: Object
},
}
// [...]
// Modification reflected in Vue Devtools
this.translation["test"] = { source: "source", target: "target" }
// Performing async call or promise with axios
Promise.all(promises)
.then((responses) => {
responses.forEach((response) => {
this.translation[Object.keys(response.data)[0]] =
response.data[Object.keys(response.data)[0]];
});
})
.then(() => {
console.log("-------------------");
console.log("After: Promise.all:");
// Mutations visible through console.log but not in Vue Dev-Tools
console.log(this.translation);
})