change button switch toggle in vuejs - vue.js

Question

I have a button that when I click it changes the status of the record, but when I update, the color of the button does not change, if I refresh the page if it changes, how can I make the button change when I update the record
Table:
<div class="card-body">
<table id="tblProfiles" class="table table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Description</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="(profile, index) in profiles" :key="index">
<td>{{ profile.description }}</td>
<td>
<button
class="btn-sm"
:class="[profile.status == 1 ? 'btn-success' : 'btn-danger']"
#click="statusUpdate(profile.id)"
>{{profile.status == 1 ? 'Active' : 'Inactive'}}
</button>
</td>
<td>
<button class="btn btn-info btn-sm">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
Method:
// ...
statusUpdate: async function(id) {
try {
const response = await profileService.activateDesactivate(id);
console.log(response);
} catch (error) {
console.log(error);
}
}

Answer 1

Send profile object insted of id prop:
<div class="card-body">
<table id="tblProfiles" class="table table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Description</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="(profile, index) in profiles" :key="index">
<td>{{ profile.description }}</td>
<td>
<button
class="btn-sm"
:class="[profile.status == 1 ? 'btn-success' : 'btn-danger']"
#click="statusUpdate(profile)"
>{{profile.status == 1 ? 'Active' : 'Inactive'}}
</button>
</td>
<td>
<button class="btn btn-info btn-sm">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
Method receives profile objetc and update it as you want. In your case status prop changes the color class of your button.
statusUpdate: async function(profile) {
try {
const response = await profileService.activateDesactivate(profile.id);
profile.status = 1;
console.log(response);
} catch (error) {
console.log(error);
}
},