How to concatenate/modify props in VueJS - vue.js

Question

I'm trying to build an application in Vue2 I have a parent component where I'm passing a data as props to child component using v-for.
Here is my parent component:
<template>
<div class="row" v-for="(item, index) in variables">
<design-arch :details="item" :selectedFields="selectedFields"></design-arch>
</div>
</template>
props:['selectedFields'],
data() {
return {
variables:[
{id: 1, role: 2, specialisation: 13, name: 'ABC - spec 1', role_name: 'ABC', spec_name: 'spec 1'},
{id: 2, role: 2, specialisation: 24, name: 'ABC - spec 2', role_name: 'ABC', spec_name: 'spec 2'},
{id: 3, role: 2, specialisation: 27, name: 'ABC - spec 3', role_name: 'ABC', spec_name: 'spec 3'},
]
}
}
and below is my child component:
<template>
<table v-if="tableData && tableData.data.length">
<thead class="">
<tr>
<th>Sr No</th>
<th>Projects Count</th>
<th>Value</th>
<th>Area</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableData.data">
<td>{{tableData.meta.from + index}}</td>
<td>{{item.projects_count}}</td>
<td>{{item.value}}</td>
<td>{{item.area}}</td>
</tr>
</tbody>
</table>
</template>
props: ['details', 'selectedFields'],
data(){
return{
loading: false,
tableData:{},
filters: '',
}
},
methods:{
fetchData(){
this.filters = this.selectedFields;
this.filters['role'] = typeof this.selectedFields['role'] !== 'undefined' ? this.selectedFields['role'] : [{id: this.details.role, name: this.details.role_name}];
this.filters['specialisation'] = typeof this.selectedFields['specialisation'] !== 'undefined' ? this.selectedFields['specialisation'] : [{id: this.details.specialisation, name: this.details.spec_name}];
this.filters['sort_by_column'] = typeof this.selectedFields['sort_by_column'] !== 'undefined' ? this.selectedFields['sort_by_column'] : { column: 'projects_count', order: 'desc'};
console.log(this.filters)
//axios call... with payload as this.filters
}
},
In above code we need to concatenate or modify the prop - selectedFields and call the API to get the data. Since each component has specific modifications, we need to re-calculate in the child component.
Currently my filters are similar in each child component and the modifications are not reflected during the Axios call.
How we can modify the props element inside the local data. So that we can have different executions.
Any better approach is appreciated. Thanks.

Answer 1

I would suggest adding a Vue watch on the props details. Anytime details changes it will rerun fetchData(). See Vue watch.
watch: {
details: {
immediate: true,
deep: true,
handler (oldValue, newValue) {
this.fetchData()
}
}
}