Как отследить что даёт нагрузку в vue приложении?

Да, это решило вопрос. Оказалось там есть аудит(никогда им раньше не пользовался). В аудите получил конкретные подсказки что не так.
Провел работу над ошибками. Проблема решена

Как отследить что даёт нагрузку в vue приложении?

Алексей Ярков, не подходит такое дело, как раз весь контент реактивный

Как отследить что даёт нагрузку в vue приложении?

ozknemoy, здесь наверно я недосказал.
Исправляюсь.
Строк в таблицах как раз не так много.
Порядка 200-300. Но большАя часть ячеек (порядка 1000 на таблицу) таблицы реактивны(Vue, пропсы, классы и т, д), часть из них объединенные, у каждой может быть свой стиль.
И когда писал эти таблицы на чистом js (формирование, поведение) они летали. И речи не было о тормозах.
Сейчас же мне нужно выяснить что конкретно в них тормозит. Для этого нужен инструмент.
А вообще я в фронте недавно, потому вопрос наверно немного странно выглядит

Возможно ли на Java сделать шутер?

)))

Как отследить что даёт нагрузку в vue приложении?

Abdula Magomedov, подобные варианты я рассматривал, но есть несколько "но":
1 таблицы нелинейны, то есть, есть объединения как по строкам так и по столбцам, и они могут быть в разных частях таблицы.
2 одна таблица целостная и работая с ней пользователь постоянно обращается к разным ее частям. Не уверен что постоянное хаотичное движение по контенту (реактивному) можно как то оптимизировать, будут же постоянные пересчеты.

Для решения мне, все таки нужен инструментарий, чтобы понять конкретное узкое место и принимать решение по дальнейшей оптимизации

Как обмануть реактивность Vue?

Это как бы и решение и нет.
Поставил вьюкс. Сделал такое решение, и даже получил решение. Данные стали обновляться.
Тормоза как будто бы даже стали поменьше, но не значительно.
Меня на этом этапе устроило то что хотя бы реактивность работала как надо.
1. Но меня смутило две вещи, что я пихаю в стор данные конкретного компонета. Как бы не очнь красиво
2. Возник вопрос, а нельзя ли такое же поведение сделать в компоненте

И я попробовал.
И получилось.
В компоненте с таблицей я создал data поле values:{} который передаю в каждый компонет-ячейку
Там он дергается по указанному Артемом способу только не из стора, а из входящей проперти values;

Раньше такой способ не работал (хотя я и его пробовал), так как не было реактивности у полей объекта values (их же заранее не инициализировали и они не обрастали проксями);
Сейчас же я при добавлении полей со значениями использую не простое присвоение а Vue.set()

Возможно это выглядит как хак, или это и есть хак,
Но работает замечательно и это решило мои проблемы на 100%

Как обмануть реактивность Vue?

К сожалению нельзя по 100. Страница отображает как бы эксель лист. И соответственно даже таблица 20*30 это уже 600 ячеек, а есть и 20*200.
Возможно неудачно выбран Vue для данной задачи.
Почитал Vuex, думаю он не решит проблемы.
Корень проблемы в том что массив данных большой. Как то разбить я его не могу. То есть при изменении даже небольших порций данных, продергиваться будет весь массив (если я правильно понимаю устройство реактивности вью). Возможно проблему решило бы использование Map но как я понял из документации на мапе реактивность не поддерживается

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Спасибо. Ваши ответы помогли найти решение.

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Спасибо, Ваши ответы дали мне варианты реализации задуманного. Как оказалось, моя проблема лежала немного в другом месте.
На некоторых из полей висели компоненты v-autocomplete из vuetify. Они то и изменяли поля после инициализации. Разберусь с ним и опубликую здесь свою реализацию.

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Да такой подход мне попадался при поиске в гугле.
Но что то там писало по поводу очередности полей в сравниваемых json-строках, что типа может не сработать сравнение. Типа {name:'AAA', age:5} !== {age:5, name:'AAA'}. Проверять я к сожалению не стал.
Там же предлагалась функция честного сравнения объектов с рекурсией по филдам, но я надеялся обойтись простыми решениями. Кстати json сравнения не хотел бы использовать т к у меня есть поля и по 1000 символов , а полей немало (5-10-20) не знаю как скажется на скорости.
По поводу wotch-еров и JQuery : не знаю насколько привязан автор Vue к JQuery, я так не особо его знаю, а вотчеры (да и другие "инструменты") использую по необходимости. Читал в документации, что вотчеры по возможности лучше заменять на computed свойства. Но вот без сравнения старых данных с новыми ничего лучше не придумал

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Вот более приближенный результат. И он к сожалению не работает

<template>
    <div>
        <input type="text" v-model="name">
        <button :disabled="!name_changed">Сохранить</button>
        <button :disabled="!name_changed" @click="get">Отмена</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:undefined,
            name_changed:undefined
        }
    },
    mounted(){
        this.get();
    },
    methods:{
        get(){
            axios.get('any')
                    .then(resp=>{
                        this.name = resp.data.name;
                        this.name_changed = false;
                        this.$watch('name', () => this.name_changed = true);
                    })
        }
    }
}
</script>

И я честно говоря, не знаю можно ли вот так навешивать слежение несколько раз, не уверен в ожидаемом поведении "следителя"

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Спасибо за ответ. Он немного помог, и в принципе по предоставленному коду ответил.
Но в рабочем коде запрос выполняется несколько раз причем по вызову пользователя и там уже не срабатывает.

Как в компоненте отследить изменение полей для включения кнопок сохранения?

Тут набросал примерный код

<template>
    <div>
        <input type="text" v-model="name">
        <button :disabled="!name_changed">Сохранить</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:undefined,
            name_changed:undefined
        }
    },
    watch:{
        name(val, old){
            this.name_changed = true;
        }
    },
    mounted(){
        axios.get('any')
        .then(resp=>{
            this.name = resp.data.name;
            this.name_changed = false;
        })
    }
}
</script>

Permission на клиенте. Как реализуют профи?

То есть в ответе со списком элементов слать доступность операций со списком, это понял. А что значит общая кнопка на обновление?! То есть как то некрасиво получается как в Mvc. Еще уточнение: обновление с периодичностью как то выглядит слишком нагружено для сервера. То есть клиенты просто открыв форму будут грузить запросами. В любом случае спасибо