Пересчет функции после обновления с VueJS

Question

Я даже не буду притворяться, что знаю, что я делаю, но я собираюсь спросить, так как это одна из самых неприятных особенностей VueJS, ну, по крайней мере, для меня.

Так что это это ситуация. У меня есть несколько разделов, создающих свои собственные итоги, и итоговая сумма, составленная из этих рассчитанных итогов.

Я дам вам основы:

• Парковка
• Транспорт
• Пробег *
• Прожиточный минимум

Каждый из приведенных выше разделов создает общее количество строк, что в данный момент отлично работает. Через минуту я доберусь до пробега.

Каждый из этих итогов затем вычисляется в общий итог и также отображается.

В данный момент я делаю что-то вроде этого:

    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;
        }

    },

Я уверен, что это не самый эффективный и почти наверняка неправильный подход к этому (пожалуйста, поправьте меня, я Я самоучка).

Так что моя проблема связана с пробегом.

В настоящее время я выполняю расчет общего количества каждой строки на основе стоимости за милю В НАЧАЛЬНОМ РАБОТЕ (то есть при первой загрузке). ).

        calculateMileage(ppm) {
            this.mileage.forEach(e => {
                e.amount = e.mileage * ppm;
            });
        },

Ничего сложного, но это работает.

Вот моя проблема. Сумма за пробег создается только здесь. Я пытаюсь обновить сумму, чтобы затем автоматически обновить все остальные итоги.

Итак, у меня есть следующие настройки:

• Основной компонент, отображающий все элементы
• Подкомпоненты для добавления или обновления (всплывающие окна)

Таким образом, добавление и обновление отлично работает для всех других разделов, так как они имеют выделенный столбец суммы, хранящийся в базе данных, но пробег рассчитывается на основе Пенса за милю и динамически отображается.

Что я должен использовать / попытаться рассчитать эту цифру при добавлении и обновлении. Я пытался использовать рассчитанные методы, но, похоже, вы не можете рассчитать из другого рассчитанного метода.

Любые идеи будут полезны. Я могу предоставить больше кода, если необходимо.

РЕДАКТИРОВАТЬ:

Это то, как данные извлекаются из базы данных в переменную this.milet

            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);
            });

пробег содержит следующие поля:

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;

РЕДАКТИРОВАТЬ 2:

Я добавил этот наблюдатель на месте, но он срабатывает только при начальной загрузке

    watch: {
        deep: true,
        mileage: {

            handler(){
                console.log("Fired");
                this.calculateMileage();
            }
        }
    }

Я подозреваю, что мне нужно заставить его наблюдать за предметами как-то конкретно, но сейчас я в растерянности.