Вадим

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

Если это происходит из-за инициализации слайдера, то можно попробовать её отложить.

Вообще тут Ваш код должен был быть, с Вашей попыткой реализации..

google: chevron css

const openPopUp = document.getElementById('open_pop_up');

- id должен быть уникальным в рамках страницы. Не должно быть более одного элемента, с повторяющимся id. В итоге тут будет найден только первый в разметке элемент с таким id. То есть только первая кнопка "заказать" будет работать.

const closePopUp = document.getElementById('pop_up_close');

- не существует элемента с таким id. Есть с class.

const popUp = document.getElementById('pop_up'); - аналогично предыдущему.

<a class="table_box_button" href="#" class="open_pop_up">Заказать</a>

Это где Вы научились два раза один и тот же атрибут объявлять на элементе? Объединить в один.

Проблема в шапке таблицы, где вложенные объекты раскрываются в другую таблицу

Всё верно. Проблема именно в этом. Что у Вас получается 2 несогласованные таблицы. Не понято зачем.

<table>
  <thead>
    <tr>
      <th rowspan="3">Наименование</th>
      <th colspan="3">Компания</th>
      <th rowspan="3">Цена</th>
      <th rowspan="3">Валюта</th>
    </tr>
    <tr>
      <th rowspan="2">Название</th>
      <th colspan="2">Страна</th>
    </tr>
    <tr>
      <th>Название</th>
      <th>Морсокй морт</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
  </tbody>
</table>

Если под "ближайший" подразумевается вверх по дереву, то:
onclick="doLoad(this.closest('form'))"

он возвращает дату в формате
MM-DD-YYYY - месяц день год

Нет, не возвращает.
Возвращает в формате YYYY-MM-DD.

как-то можно без библиотек поменять на
DD-MM-YYYY

Можно. Все библиотеки для JS работают на JS.

var d = document.querySelector('input[type="date"]')

d.addEventListener('change', function(){
  console.log(this.value) // YYYY-MM-DD
  const [y, m, d] = this.value.split('-')
  console.log(`${d}-${m}-${y}`) // DD-MM-YYYY
})

- forEach
+ some

const isFilled = computed(() => {
  Object.entries(names.val).some(([, val]) => val.inputVal)
})

$('.cart-arrow, main') какие по Вашему выбираются элементы в этом селекторе?

function createPrintPage(htmlString) {
    const w = window.open('print-me', '_blank')
    w.document.write(htmlString)
}

createPrintPage('<h1>Print me title</h1>')

?

Ну или определить для роута, который предназначен для печати, отдельный layout, в котором не будет подключен header и footer.
Ну или стилями скрыть их

Локал стораж хранит строки. Поэтому при установке в него false, будет храниться 'false'.
checked ожидает - boolean.
строка 'false' - конвертируется в true, потому что любая не пустая строка конвертируется в true. Это основа языка.

соответтсвенно:

-themeCheckBox.checked = localStorage.getItem('themeCheckBox')
+themeCheckBox.checked = localStorage.getItem('themeCheckBox') === 'true'

добавить паддинг справа

Не совсем.
1) Не все скринридеры посчитают title существенным для озвучивания (пруфов на руках нет).
2) Есть степень специфичности, на основе которой решается что озвучить пользователю.
aria-label приоритетнее чем title.
title наименее приоритетный, насколько я помню. Его перебьёт всё что угодно, и если совсем ничего нет, даже content, только тогда на него обратят внимание.
title - нет на мобильных девайсах. По крайней мере визуально (voiceover`ом не проверял)

Вот скрин кнопки "подписаться" под Вашим вопросом из дерева доступности в десктопном гугл хром:

Как видно - по итогу пользователю зачитается "Подписаться1", потому что aria-labelledby и aria-label не заданы, а content приоритетнее чем атрибут title.

А в приведённом Вами примере, если опустить aria-label, то, на вскидку, должен зачитать: "изображение" + значение атрибута alt + "ссылка", так как контент есть.
А вот если бы в ссылке не было вообще ничего и картинка рисовалась на css, скажем, фоном. Вот тогда, НАВЕРНОЕ, можно было бы сказать что aria-label и title равны. Но только при условии что скринридер вообще считает title за семантический атрибут.

При использовании предварительного рендеринга страниц, независимо на стороне сервера(SSR) или при билде приложения(SSG), разметка, прилетающая на клиент - просто разметка. Не реактивна.
Думаю, Вы знаете, что есть такой процесс как гидратация - если коротко, то это как раз и есть процесс, когда статика обвешивается реактивностью.
Стэйт - это просто объект в памяти.
Откуда ему взяться в памяти, если начальное состояние приходит с сервера?
Вот оно и приходит в переменной INITIAL_STATE.
Происходит гидратация, initial_state становится, назовём условн, current state, то есть переходит в vm.$store и дальше работает как SPA.

Для сео, напрямую, это никак не нужно. Нужно для вашего приложения.

https://yablyk.com/128244-chrome-link-to-text-fragment/
1. Откройте браузер Google Chrome и перейдите на необходимую веб-страницу.
2. Выделите нужный фрагмент текста, на который вы хотите создать ссылку. Это может быть как одно слово, так и целый абзац. Нажмите правую кнопку мыши.
3. Выберите в контекстном меню пункт Копировать ссылку на выделенный текст.

Зависит от того, что у Вас на клиенте.
Как выводятся данные, как генерируется разметка.

Если разметка генерируется через js, то когда создаётся инстанс карточки,
const card = document.createElement('div')
ничего не мешает назначить своё кастомное свойство, например:
card.personAge = 20.
Или, более распространённая практика - задать соответствующий data-атрибут.

Если с бэка разметка приходит, то data-атрибут
<div class="card" data-person-age="20">...</div>

- if (typeof key == 'object') {
+ if (typeof obj[key] == 'object') {

https://learn.javascript.ru/task/image-gallery
Дело за малым - поменять событие с клик на mouseover и.. кхе кхе... переписать на jquery

new Date( // чтобы конечный результат был в виде человеко читаемой строки
 Math.min.apply(  // применим функцию поиска минимального элемента в массиве с помощью apply
   null, // контекст не нужен
   arr.map(i => new Date(i.date)) // в качестве массива, среди которого ищем минимум - массив дат, преобразованных в Date
  )
).toISOString() // собственно, преобразовываем в человеко понятную строку.

Ну или нагляднее:

const dates = arr.map(i => new Date(i.date))
const minDate = Math.min.apply(null, dates)
const minDateString = new Date(minDate).toISOString()

Вы были в шаге от успеха.

- text.innerText += number;
+ text.innerText = Number.parseInt(text.innerText) + number;

Ну или нужно было перед этим прибавить к number значение из инпута