In my vue.js 2 project, I am working with an array that has the following structure:
data() {
return {
ports: [
{ id: 1, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]},
{ id: 2, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 3, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 4, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
]
}
}
I am trying to update the scores of the port with id 1. While I know how to replace the entire port using:
Vue.set(this.ports, 0, newPort);
The issue is that once this is done, the scores property on the port object loses its reactivity and does not rerender in my subcomponents. How can I achieve this without losing reactivity?