Laravel, Vue обновить порядок после axios

У меня проблема с обновлением данных после метода «аксиос». У меня есть статусы, чтобы изменить. Когда кто-то меняет статус, я хочу иметь только имя статуса без кнопок, но когда я это делаю, порядок не обновляется, он работает только тогда, когда я перехожу куда-то еще и возвращаюсь на этот сайт, тогда фактический заказ загружается, кнопка исчезает и все работает. Как сделать так, чтобы, когда кто-то менял статиус, то новый порядок загрузки и кнопка исчезали одновременно?

Вот мой код:

 <div v-if="(order.order_products[key].statuses[0].id) == 4 && orderLastStatus != 3">
<div  v-for="status in availableStatuses">
<button v-on:click="changeProductStatus(order_product.id, status.id)"v-bind:value="status.id">{{status.name}}
</button>
</div>
</div>

<div v-else>
{{order.order_products[key].statuses[0].name}}
</div>

И Vue:

  changeProductStatus: function (orderProductId, statusId) {
var self = this;
if (confirm("Are you sure You want to change status?")) {
axios.post("/order/" + orderProductId + "/changeStatus",
{"status_id": statusId})
.then(function (response) {
self.selected[orderProductId] = statusId;
console.log(self.selected);
})
}
}