Athanor

Удалось починить вашу песочницу. Она не работала, потому что js начинал выполняться до окончания загрузки html.

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

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

let index = 1000000000000000000000n;
index += 1n;
console.log(index);

Но для лучшей поддержки браузерами, конечно пока что рекомендуется делать это через полифил

Вынесите его в отдельную функцию и передавайте нужные параметры, которые могут изменяться от вызова к вызову в качестве аргументов.

function getJsonAndUpdateTable(jsonPath) {
  $.getJSON(jsonPath, function (data) {
      $(data).each(function(index, item) {
      $('#table').append(
          '<tr><td class="col1">'+ item.title01 +'</td><td class="col2">' + item.shopcode + '</td><td> <a href="' + item.link + '">' + item.title + '</a></td><td class="col3">' + item.cost + '</td></tr>'
          );
      });
  });
}

А далее вызывайте эту функцию где необходимо и передавайте внутрь путь к нужному json файлу.

1. Изменение положения элемента через абсолютное позиционирование работает медленней чем через transform. Попробуйте переделать left/top на transform: translate.
2. Есть в css волшебное свойство will-change, попробуйте подключить его.
3. Вам в ответах уже советовали попробовать использовать throttle, это точно стоит сделать, наглядно о том, как это работает и в чем разница с debounce — тут

Раз уж начали про разные способы и эффекты, есть ещё один интересный эффект, тоже просто делается — gradient map. Работает за счет подмены светов и теней на заданные цвета вот два примера:



1) Просто добавляем adjustment layer:


2) Задаём градиент:


3) Если хочется понастраивать, то используем кривые:

Есть ряд методик, помогающих справляться с нагрузкой на больших дистанциях. Одна из популярных - работа "помидорами". Суть её в том, что в течение относительно небольшого промежутка времени (25 минут) идет работа только над одной задачей, без отвлечения на соц. сети и прочие раздражители. За периодом работы следует пятиминутный отдых, за который как раз можно успеть проверить нотификации в телефоне и ответить на сообщения.
Эта и другие полезные техники есть в книге Дорофеева "Джедайские техники". Автор там подбирает значительный арсенал, как экономить силы и время.
Ещё на эту тему есть книга "Getting Things Done" от Дэвида Аллена, тоже даёт понимание, как "менеджерить" и справляться с собственными задачами, а не закапываться в них. 

Рецепт от Athanor:

0. Сначала разработайте хотябы приблизительный план и сформулируйте свою цель — двигаясь куда-либо важно понимать куда. Ну, например, хотябы поймите в какой области вам было бы интересно работать веб тоже вебу рознь. Когда у вас будет план, вы сможете понять какие конкретно навыки нужно подтянуть.
1. Формируйте базу знаний. Конечно же, необходимо получить теоретические знания о базовых принципах проектирования. Здесь можно было бы насоветовать кучу книг но это всё классика и легко гуглится, посоветую начать с книг «Типографика и верстка» и «Пользовательский интерфейс» А. Горбунова — это прямо база-база, мы даём это читать всем нашим новичкам, по цене-качеству это намного полезней каких-нибудь курсов на скилбоксе, купить можно на bureau.ru. Ещё у них на сайте есть интересный раздел советов. Можно начать с этого и обращать внимание на книги которые советует Артём Горбунов.
2. Формируйте «насмотренность». Смотрите чужие проекты на behance, декомпозируйте их и разбирайте почему они сделаны именно так, а не иначе, просто листать и восхищасться — мало.
3. Всегда что-то делайте. Мало просто почитать, пройти онлайн курс и посмотреть все лекции от design prosmotr, они могут только дать мотивационный пинок, но основная учёба и прокачка происходит во время самой работы. Придумайте себе фейковые проекты, пробуйте редизайнить существующие сервисы, ну например «редизайн сайта Аэрофлота», что угодно, или придумайте себе челендж, например каждый день делать по 1 страничке или рисовать в день по иллюстрации (тут можно погуглить, вот например https://www.dailyui.co/).
!Важно. Как можно раньше нужно переходить к реальным проектам, даже если сложно пока найти проекты за деньги, всегда можно делать что-то для друзей и знакомых за символические деньги, бартер или за пиво, но главное чтобы у вас появлялся реальный заказчик, с которым нужно договариваться — это отдельный очень важный навык.
4. Смотрите как работают старшие специалисты и просите совета. Не недооценивайте этот пункт — пара фраз арт-дира или старшего товарища могут дать «пинок», который ни одна книга не даст.
5. Учитесь себя «продавать». Начните готовить презентацию себя уже сейчас, когда кажется, что портфолио собирать не из чего и в резюме написать нечего. Это отдельная дизайн-задача, которую тоже нужно решить, чтобы доказать свою полезность и устроиться на работу или получить проекты.

пришел к выводу, что запросы к API надо делать внутри actions Vuex (якобы это best practices). Однако, я совершенно не понимаю, всегда ли это необходимо

Выносить общение с api слоем в vuex оправдано, когда данные, которые оттуда приходят вы храните в vuex.

При этом, конечно же, лучше при мутации чего-то на сервере обновлять этот список с сервера, а не пробовать повторить эту мутацию локально.

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

PS
1. добавьте в ваши actions, использующие вызовы API return, иначе при вызове в компоненте они будут возвращать не тот промис, который вы от них ожидаете.
2. Использование хэлперов mapActions, mapGetters.. позволит сделать общение с vuex в компонентах гораздо симпатичней

Вероятно, нужно добавить в настройки вот такое правило:
https://eslint.org/docs/rules/no-multiple-empty-lines

Добавить подобный метод и вызывать его для установки data

ваш таймер работает через рекурсивный setTimeout. Каждую секунду вызывается функция updateExamTimer, которая в конце выполнения планирует отложенный вызов себя же через 1 секунду.

Особенность функции setTimeout заключается в том, что при вызове она возвращает timerId, который если успеть передать в clearTimeout, то таймер(на выполнение функции updateExamTimer) отменится.

Следовательно, вам нужно изменить код так, чтоб при отключении интернета вызывался clearTimeout и в него передавался timerId, который вам нужно куда-то сохранять каждый раз при вызове setTimeout
После включения интернета, вам потребуется снова вызвать setTimeout('updateExamTimer()', 1000);, чтоб запустить таймер

Подробней

НО так же у вас фигурирует загадочная переменная EXAM_TIME_LEFT, которая неизвестно откуда берется. Если это константа и она просто объявлена выше по коду, описанный мной вариант, скорее всего, будет работать, если она прилетает с сервера(и при обновлении страницы она меняется), то ничего работать не будет и отключать таймер придется на сервере в том числе.

Обратите внимание на блок #main после применения скрипта, для него применяются стили:

.scroll-container, .scroll-container section, body, html {
    width: 100%;
    height: 100%;
}

Собственно, эти проценты берутся от родителя, если родителем выступает body, то все ок, т.к. для него применяются те же самые стили, в вашем же случае родителем выступает дополнительный блок, который этих стилей не имеет и по умолчанию не растягивается. Чтоб это исправить, достаточно прописать эти стили для этого блока так