0xD34F

<select id="country"></select>
<select id="city"></select>

const countryEl = document.querySelector('#country');
const cityEl = document.querySelector('#city');

countryEl.innerHTML = data.map(n => `<option value="${n.id}">${n.country}</option>`).join('');

countryEl.addEventListener('change', function() {
  cityEl.innerHTML = data
    .find(n => n.id === this.value)
    .cities
    .map(n => `<option value="${n.id}">${n.city}</option>`)
    .join('');
});

countryEl.dispatchEvent(new Event('change'));

ругается на сайд эффект, что я в рэндере меняю состояние массива

Внутри единственного показанного вами render'а есть подозрительный код:

answers={shuffleArray(currentQuestion.answers)}

Наверное, shuffleArray изменяет переданный массив, а не создаёт новый. Ну, попробуйте создавать сами:

answers={shuffleArray([...currentQuestion.answers])}

return this.singleMetricNamesMap.forEach(el => el[this.value.metricId])

Круто.

Откройте документацию, разберитесь, что такое forEach. И какие ещё бывают методы у массивов.

UPD.

metric() {
    if (this.metric) {
        this.setSingleMetricNamesMap({ [this.metric.id]: this.metric.name })
    }
}

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

metric(val) {
  if (val) {
    this.setSingleMetricNamesMap({ [val.id]: val.name });
  }
},

Допустим, выведены единица и все двойки: 1, 2, 2 - всего 1 + 2 = 3 числа. А если единица, двойки и все тройки: 1, 2, 2, 3, 3, 3 - всего 1 + 2 + 3 = 6 чисел. Если добавить четвёрки: 1 + 2 + 3 + 4 = 10 чисел. Ну и так далее - это сумма арифметической прогрессии. Если текущее значение счётчика цикла равно сумме натуральных чисел от 1 до текущего выводимого - начинаем выводить следующее число:

const N = чему-то там равно;

for (let i = 1, num = 1; i <= N; i++) {
  console.log(num);
  if (i === (1 + num) * num / 2) {
    num++;
  }
}

UPD. Можно пойти чуть дальше, и вспомнить про квадратные уравнения - в коде выше, в условном операторе, это вот оно. Известно значение счётчика - надо найти число. Так что нет проблем и формулу элемента последовательности вывести:

for (let i = 1; i <= N; i++) {
  console.log(Math.ceil((Math.sqrt(1 + 8 * i) - 1) / 2));
}

Слот item позволяет определить разметку строки целиком:

<v-data-table>
  <template #item="{ item }">
    <tr>
      <td class="какой-то_класс">{{ item['какое-то свойство'] }}</td>
      <td class="ещё_какой-то_класс">{{ item['ещё какое-то свойство'] }}</td>
      <td class="ну_и_так_далее">{{ item['как видите, ничего сложного'] }}</td>
    </tr>
  </template>
</v-data-table>

const last = promises => new Promise((resolve, reject) => {
  let pending = promises.length;

  if (!pending) {
    resolve();
  } else {
    promises.forEach(n => n
      .then(result => --pending || resolve(result))
      .catch(error => --pending || reject(error))
    );
  }
});

v-for={weekDay in this.arWeekDays}

выдает ошибку "index is not defined"

А может, всё-таки "weekDay is not defined"? Или вы о чём-то умалчиваете?

Про v-for забудьте:

<div>
  {this.arWeekDays.map(n => <div>{n}</div>)}
</div>

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

А вообще, никакие условные операторы тут не нужны:

siteForm.userAdmin = loginValue === login && passwordValue === password;

Сделать объект, где ключами будут статусы, а значениями - их индексы в массиве, задающем порядок сортировки:

const order = Object.fromEntries(gameTypeOrder.map((n, i) => [ n, i ]));

Дальше можно отсортировать существующий массив:

res.sort((a, b) => order[a.game_status] - order[b.game_status]);

Или собрать отсортированный новый:

const sortedRes = res
  .reduce((acc, n) => (acc[order[n.game_status]].push(n), acc), gameTypeOrder.map(() => []))
  .flat();

// или

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const sortedRes = sorted(res, n => order[n.game_status]);

Оборачиваете код в

document.querySelectorAll('.gallery').forEach(n => {

});

, заменяете '.gallery-thumbs' и '.gallery-top' на n.querySelector('.gallery-thumbs') и n.querySelector('.gallery-top') соответственно.

.slick-dots li > button {
  width: 8px;
  height: 8px;
}

.slick-dots li.slick-active > button {
  width: 20px;
  height: 20px;
}

.slick-dots li.slick-active + li > button {
  width: 14px;
  height: 14px;
}

[ int(d) ** (i + p) for i, d in enumerate(str(n)) ]

$('.gallery-colors :checked')
  .parent()
  .prevAll()
  .find('input[type="radio"]:not(:disabled)')
  .last()
  .click()

Это предыдущий. Следующий - надо заменить prevAll на nextAll, last на first.

str.slice(str.lastIndexOf('/') + 1, str.lastIndexOf('.'))
// или
str.split('/').pop().split('.').slice(0, -1).join('.')
// или
str.replace(/.+\//, '').replace(/\.[^.]+$/, '')
// или
str.match(/(?<=\/)[^/]+(?=\.[^.]+$)/)[0]
// или
str.match(/\/([^/]+)\.[^.]+$/)[1]

<div class="preloader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.circle {
  background: grey;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: preloader 1s infinite linear;
}

.circle:nth-child(1) { animation-delay: 0s; }
.circle:nth-child(2) { animation-delay: 0.2s; }
.circle:nth-child(3) { animation-delay: 0.4s; }

@keyframes preloader {
  0%, 40% {
    background: grey;
  }
  20% {
    background: black;
  }
}

$('button.prev').click(function() {
  $('.slide:last').prependTo($('.slider'));
  $('.slider').css('margin-left', '-100%').animate({
    marginLeft: '+=100%'
  }, 500);
});

$(document).on('click', function(e) {
  e.preventDefault();
  const $submenu = $(e.target).closest('li').children('.submenu');
  $submenu.fadeToggle();
  $('.nav li ul').not($submenu).fadeOut();
});