WapSter

Валидация данных. Готовые решения могут быть для разных стэков, все зависит какой используется у вас.

https://learn.javascript.ru/websockets

Просто перед запросом меняешь состояние и после получения ответа возвращаешь.

const getFn = async () => {
  let loading = true;
  try {
    // Некий проммис
  } catch (e) {
    // Обработка ошибки
  } finaly {
    loading = false;
  }
}

Соответственно вместо loading можно использовать, что угодно. И в finaly вставлять не обязательно, можно уже в ошибке некий код обрабатывать, в зависимости от результата запроса что-то делать. Показал частый пример

https://ru.vuejs.org/v2/api/index.html#Vue-set

Зачем такие извращения все куда проще
Но для сетки есть более лучшии техники. им не нужно задавать внешнии отступы, а сделать их впритык друг к другу, и уже в ячейках добавлять видимые блоки и давать им отступы. А еще лучше юзать гриды, раз все равно используешь flex-gap

const obj = {"key":
  [
    {"id":"key","data_1":"data1","data2":"data2"},
    {"id":"key","data_1":"data1","data2":"data2"},
    {"id":"key","data_1":"data1","data2":"data2"},
  ]
}

const arr = obj.key.map(n => ({...n, data_1: n.data2, data2: n.data_1}))

https://learn.javascript.ru/event-bubbling

А зачем ты вешаешь событие на отдельные инпуты, если можно на форму повесить

https://learn.javascript.ru/localstorage

https://ru.vuejs.org/v2/guide/components-slots.htm...

document.getElementById('exampleModal') подозреваю проблема в этом. Я так понимаю ты используешь элемент из виртуального DOM. Повесь на этот элемент ref и передавай его в экземпляр класса.