laravel and vuejs post method - laravel

Question

I need your help I'm making a shopping cart in laravel with vuejs.
I have the following problem I am new to vuejs I am inserting products from a component A where is my form in vue I insert it but I have no response in my component B where is my table where the products are registered, be careful if you add the detail is that I have to reload the page to see that the number of products increased.
I am using EventBus from vuejs
I hope you can help me thanks for any help
this is my form
<form method="post" v-on:submit.prevent>
<input :value="csrf" type="hidden" name="_token" >
<input :model="ProductSearch.id" name="id" type="hidden" class="form-control input-lg">
<input :value="ProductSearch.name" name="name" type="hidden" class="form-control input-lg">
<input :value="ProductSearch.sale_price" name="precio" type="hidden" class="form-control input-lg">
<input :value="1" name="cantidad" type="number" class="form-control input-lg" min="1" style="text-align:center" >
<button v-on:click="addproduct" class="btn btn-info btn-block" name="btnAccion" value="Agregar" type="submit"> Add</button>
</form>
This is my method
addproduct: async function () {
axios.post('sales/item', {
id: this.id,
name: this.name,
precio: this.precio,
cantidad: this.cantidad,
})
.then(function(response){
EventBus.$emit('agregado', response.data)
})
.catch(error => {
console.log(error.response);
});
}
this is my table where I reflect my result.
<tbody >
<tr v-for="(ProductCart, index) in carrito" :key="index.id">
<td>{{ProductCart.name}}</td>
<td>{{ProductCart.cantidad}}</td>
<td>{{ProductCart.precio}}</td>
<td>{{ProductCart.cantidad * ProductCart.precio}}</td>
<td>
<form method="post">
<input :value="csrf" type="hidden" name="_token" >
<input type="hidden" name="id" id="id" value="" >
<button class="btn btn-danger" type="submit"> Remove</button>
</form>
</td>
</tr>
<tr>
<th colspan="2"></th>
<td>
<h5>Total</h5>
</td>
<td align="right">
<h5>{{ total }}</h5>
</td>
</tr>
</tbody>
scrip of component of the table
data(){
return{
csrf: document.head.querySelector('meta[name="csrf-token"]').content,
carrito: [],
}
},
created(){
EventBus.$on('agregado', data => {
this.carrito.push(data)
})
},
in my console I receive the error:
Error in event handler for "agregado": "TypeError: _this.carrito.push is not a function"