Recalculating a function after update with VueJS - laravel

Question

I won't even pretend I know what I am doing but I am going to ask as this is one of the most frustrating features of VueJS, well, at least for me.
So this is the situation. I have a number of sections creating their own totals and a final total made up of those calculated totals.
I'll give you the basics:
Parking
Transport
Mileage*
Subsistence
Each of the sections above creates a total from a number of lines of items which works fine at the moment. I'll get to mileage in a minute.
Each of these totals is then calculated into a grand total and also displayed.
At the moment, I am doing something like this:
computed: {
totalAmount: function() {
return this.calculateAmount(this.total);
},
transportAmount: function () {
if(this.isLoading === true) return 0;
return this.total.find(total => total.name == "transport").amount = (this.isLoading === false) ? this.calculateAmount(this.transport) : 0;
},
mileageAmount: function () {
if(this.isLoading === true) return 0;
return this.total.find(total => total.name == "mileage").amount = (this.isLoading === false) ? this.calculateAmount(this.mileage) : 0;
},
parkingAmount: function () {
if(this.isLoading === true) return 0;
return this.total.find(total => total.name == "parking").amount = (this.isLoading === false) ? this.calculateAmount(this.parking) : 0;
},
subsistenceAmount: function () {
if(this.isLoading === true) return 0;
return this.total.find(total => total.name == "subsistence").amount = (this.isLoading === false) ? this.calculateAmount(this.subsistence) : 0;
}
},
I am sure this is not the most efficient and almost certainly the wrong way to approach this (please correct me, I am self taught).
So my problem is with mileage.
I currently run a calculation for the total of each line based on a cost per mile AT INITIAL RUNTIME (i.e. when it first loads).
calculateMileage(ppm) {
this.mileage.forEach(e => {
e.amount = e.mileage * ppm;
});
},
Nothing too complex but it works.
Here is my problem. The amount for mileage is only created here. I am attempting to update the amount to then automatically update all the rest of the totals.
So I have the following setup:
Main component displaying all items
Sub components for adding or updating (pop up boxes)
So adding and updating works great for all other sections as they have a dedicated amount column stored in the database but the mileage one is calculated based on a pence per mile cost and dynamically displayed.
What should I use/try to calculate this figure on adding and updating. I tried using calculated methods but it appears you can't calculate from another calculated method.
Any ideas would be helpful. I can provide more code if necessary.
EDIT:
This is how the data is pulled from a database into the this.mileage variable
await axios.get(API_BASE_URL+'/claims/travel/mileage').then(response => {
this.mileage = response.data.data;
this.calculateMileage(0.55);
let totalModel = {};
totalModel.name = 'mileage';
totalModel.amount = (this.mileage.length > 0) ? this.calculateAmount(this.mileage) : 0;
this.total.push(totalModel);
});
mileage contains the following fields:
create table mileages
(
id bigint unsigned auto_increment
primary key,
claim int not null,
vehicle text not null,
mileageType int not null,
mileageDate date not null,
mileageTime time not null,
mileage double not null,
reason text not null,
origin text not null,
destination text not null,
created_at timestamp null,
updated_at timestamp null
)
collate=utf8mb4_unicode_ci;
EDIT 2:
I have added this watcher in place but it only fires at the initial load
watch: {
deep: true,
mileage: {
handler(){
console.log("Fired");
this.calculateMileage();
}
}
}
I suspect I need to make it watch the object items specifically somehow but I am at a loss at the moment.