Почему модель Vue не обновляется при input.val(value)?

У меня есть редактируемая таблица:

<div id="myTable">
   <b-table class="overflow-auto" :items="filtered" :fields="visibleFields" :filter="filter">
        <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }">
            <b-input v-model="item[field.key]" placeholder="--" @@change="update" />
        </template>
    </b-table>
</div>

Скрипт Vue(cdn)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        new Vue({
            el: "#myTable",
            computed: {
                editableFields() {
                    return this.fields.filter(field => field.editable);
                },
                visibleFields() {
                    return this.fields.filter(field => field.visible)
                }
            },
            data: {
                filter: '',
                filtered: JSON.parse(`@Html.Raw(Model.SportBudgetsJson)`),
                fields: [
                    { key: 'Id', label: 'Id', visible: false },
                    { key: 'Field1', label: 'Field1', editable: true, visible: true, class: "percentageFormat pValue", thStyle: { width: "5%" } },
                    { key: 'Field2', label: 'Field2', editable: true, visible: true, class: "moneyFormat mValue", thStyle: { width: "10%" } },
                ]
            }
        });
...

И js функции для форматирования значений в таблице:

 function formatValue(value, event, isPercent) {
     ... // возвращает значение в формате ###.##% или $###,###.##
     return formattedValue;
 }

 function copyValue(element, isPercent) { // обновление значения в % если значение $ изменилось и наоборот
     var selector = isPercent ? '.mValue' : '.pValue';
     var input = $(element).parent('td').parent('tr').children(selector).first().children('input');
     var value = element.value.replace(/[^\d]+/g, '');
     value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent);
     $(input).val(formatValue(value, 'input', !isPercent));
 }

 function converValue(value, isPercent) {
     value = parseFloat(value);
     var totalBudget = parseFloat(`@Model.TotalBudget`);
     if (isPercent) {
         return parseFloat(totalBudget * (value / 100)).toFixed(2);
     }
     else {
         return parseFloat(value / totalBudget * 100).toFixed(2);
     }
 }

 $(document).ready(function () { // применение событий форматирования
     $('.moneyFormat input').each(function (index, el) {
         $(el).val(formatValue(el, "input", false));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, false));
             if ($(el).parent('td').first().hasClass('mValue'))
                 copyValue(this, false);
         });
     });

     $('.percentageFormat input').each(function (index, el) {
         $(el).val(formatValue(this, "input", true));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, true));
             if ($(el).parent('td').first().hasClass('pValue')) {
                 copyValue(this, true);
             }
         });
     });
 });

Когда я использую $(input).val(formatValue(value, ‘input’, !isPercent)) значение в таблице обновляется, но v-model нет. Но когда я ввожу значение в поле вручную – v-model обновляется.

Я хочу реализовать обновление значений в реальном времени:
Общая сумма $100.00
Field1: изменяется с 12.00% на 13.00%, так что Field2 автоматически изменяется с $12.00 на $13.00.

Общая сумма $100.00
Field2: изменяется с $50.00 на $45.00, так что Field1 автоматически изменяется с 50.00% на 45.00%.

Значения должны вычисляться и вставляться в их поля.

Как мне обновить v-model для значений инпутов?

Манипуляции с DOM с помощью JQuery не обновляют автоматически реактивное связывание данных Vue, так как реактивная система Vue зависит от своих собственных методов для обнаружения изменений данных. Когда вы напрямую манипулируете DOM с помощью JQuery, Vue не знает об этих изменениях.

function copyValue(element, isPercent) { 
    var selector = isPercent ? '.mValue' : '.pValue';
    var row = $(element).closest('tr'); 
    var input = row.find(selector).first().children('input');
    var value = element.value.replace(/[^\d]+/g, '');
    value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent);

    var index = row.index(); 
    if (isPercent) {
        this.filtered[index].Field1 = value; 
    } else {
        this.filtered[index].Field2 = value; 
    }
    input.val(formatValue(value, 'input', !isPercent));
}