0xD34F

const withWrapper = (ComponentToWrap) => (props) => {
  return <div className="Wrapper"><ComponentToWrap {...props} /></div>;
};

const WrappedMain = withWrapper(Main);

render() {
  return (
    <WrappedMain />
  );
}

xmlnsXlink="http://www.w3.org/1999/xlink"

data: () => ({
  size: 52,
  col: 0,
  row: 0,
}),
methods: {
  onMouseMove(e) {
    this.col = e.offsetX / this.size | 0;
    this.row = e.offsetY / this.size | 0;
  },
},
computed: {
  blockStyle() {
    return {
      backgroundSize: `${this.size}px ${this.size}px`,
    };
  },
  blockCursorStyle() {
    const { col, row, size } = this;
    return {
      transform: `translate(${col * size}px, ${row * size}px)`,
      width: `${size * 0.95}px`,
      height: `${size * 0.95}px`,
    };
  },
},

<div class="block" :style="blockStyle" @mousemove="onMouseMove">
  <div class="block-cursor" :style="blockCursorStyle"></div>
</div>

https://jsfiddle.net/La4297zd/

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

Вместо margin-bottom задавайте margin-top, и первым count элементам выставляйте 0:

margin-top: $margin;

@for $i from 1 through $count {
  &:nth-child(#{$i}) {
    margin-top: 0;
  }
}

return {
  arr: {

Если arr массив, почему пытаетесь превратить его в объект?

this.setState(({ arr }) => ({
  arr: arr.map((n, i) => i === posX
    ? n.map((m, j) => j === posY ? 1 : m)
    : n
  ),
}));

interface ItempElement {
  x: number;
  y: number;
};

interface Itemp extends Array<ItempElement> {};

Свойство width у элементов headers. Число или строка. Если число - это пиксели. Если строка - доступны все единицы измерения css (значение подставляется в style соответствующего th).

В документации не нашёл.

Я бы скорее поверил в "не нашёл документацию". Чего там можно было не найти - без понятия, всё на поверхности лежит (в блоке API: компонент v-data-table, вкладка props - выбраны по умолчанию, достаточно просто скроллить вниз и читать, какой параметр за что отвечает - неужели это так сложно?).

const values = arr.length
  ? arr[0].filter(n => arr.every(m => m.includes(n)))
  : [];

или

const values = (arr[0] || []).filter(function(n) {
  return this.every(m => m.has(n));
}, arr.map(n => new Set(n)));

или

const values = Array
  .from(arr
    .flatMap(n => [...new Set(n)])
    .reduce((acc, n) => acc.set(n, (acc.get(n) || 0) + 1), new Map))
  .reduce((acc, n) => ((n[1] === arr.length) && acc.push(n[0]), acc), []);

или

const values = Array
  .from(arr.reduce((acc, n) => (
    n.forEach(m => acc.set(m, acc.get(m) || new Set).get(m).add(n)),
    acc
  ), new Map))
  .reduce((acc, n) => (n[1].size === arr.length && acc.push(n[0]), acc), []);

UPD. Наконец-то дождались:

const values = [...arr.reduce((acc, n) => (
  n = new Set(n),
  acc.intersection?.(n) ?? n
), [])];

Сначала определяете директиву, потом создаёте экземпляр Vue. Не наоборот.

UPD. Первая буква в имени директивы - русская:

Vue.directive('сarusel', {

<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]);