Как я могу сохранить новые сохраненные значения между компонентами?Извлечение исходных значений из DOM

Question

У меня есть 3 разных компонента с кнопками для навигации по ним. Все значения формы по умолчанию извлекаются из DOM и устанавливаются в данные beforeMount. Причина, по которой я так поступаю, заключается в том, что значения поступают из моей базы данных Rails.

Когда я редактирую форму и сохраняю ее успешно (через ajax), все хорошо, но как только я переключаю компоненты с помощью навигации, эти значения на входах сбрасываются обратно к исходным / старым значениям, так как beforeMount снова запускается и DOM не был обновлен новым значением (из-за отсутствия обновления).

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

Вот как я устанавливаю данные внутри beforeMount:

const element = document.getElementById('setting');
const setting = JSON.parse(element.dataset.setting)
this.discountType = setting.discount_type;

Затем при каждом запросе ajax я пытался редактировать те исходные значения в DOM, которые не работали:

outerThis = this;
Rails.ajax({
        url: '/update-settings',
        type: 'POST',
        data: data,
        dataType: 'json',
        success: (data) => {
            ShopifyApp.flashNotice('Successfully updated')
            var settings = $('#setting').data('setting')
            settings.discount_type = outerThis.discountType
        },
        error: (err) => {
            ShopifyApp.flashError('There was an error')
        }
    })

Каков рекомендуемый способ решения этой проблемы?