0xD34F

Никакие хуки тут не нужны. Настройте слежение за свойством:

watch: {
  measureSystem: {
    immediate: true,
    handler() {
      // сюда переносите код из mounted - axios.get(...)
    },
  },
},

Заниматься установкой значений в computed не надо, сделайте measureSystem из обычного свойства вычисляемым (если, конечно, оно используется где-то ещё, помимо показанного запроса; в противном случае можно следить за toggle и вычислять значение параметра units непосредственно перед самим запросом):

computed: {
  measureSystem() {
    return this.toggle === 1 ? 'metric' : 'Imperial';
  },
},

$grouped = array_values(array_reduce($data, function($acc, $n) {
  $id = $n['store_id'];
  if (!isset($acc[$id])) {
    $acc[$id] = [ 'store_id' => $id, 'product_id' => [] ];
  }
  $acc[$id]['product_id'][] = $n['product_id'];
  return $acc;
}, []));

Снимайте обработчик события после того, как нужное действие будет выполнено:

$(window).scroll(function onScroll() {
  if ($(this).scrollTop() > 777) {
    $('.div_clone').clone().appendTo('.container2');
    $(this).off('scroll', onScroll);
  }
});

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

const isAllUnique = (...args) => new Set(args).size === args.length;

console.log(isAllUnique(69, 187, 666)); // true
console.log(isAllUnique(2, 2, 3, 4)); // false
console.log(isAllUnique(...'ABCDA')) // false

Допустимо ли использовать defs внутри symbol в SVG-элементе?

Да.

А тег style?

Да.

Где можно почитать о таких нюансах?

https://www.w3.org/TR/SVG11/struct.html#SymbolElement

<input @change="doSomethingWithValue" />

methods: {
  doSomethingWithValue(e) {
    const value = e.target.value;
    ...

Если надо в метод передавать дополнительно какие-то параметры, то объект события доступен в шаблоне как $event:

<input @change="doSomethingWithValue($event, 'hello, world!!')" />

$newData = array_map(function($item) {
  return array_map(function($val) {
    return [ 'text' => $val ];
  }, array_values($item));
}, $data);

например

Проблема в том, что рисуется только последний график. Почему?

Потому что

main.innerHTML += str;

После каждого += дочерние элементы main создаются заново. Соответственно, уже созданные графики удаляются.

Создавайте сразу всю разметку.

Или

main.insertAdjacentHTML('beforeend', str);

Или

const canvas = document.createElement('canvas');
main.appendChild(canvas);

$('.nav').on('click', '[href="#id-3"]', function() {
  $('.slick').slick('slickGoTo', 3);
});

const elems = [...document.querySelectorAll('.class1')];
const index = elems.findIndex(n => n.classList.contains('class2'));

или

const elems = document.querySelectorAll('.class1');
let index = elems.length;
while (--index >= 0 && !elems[index].matches('.class2')) ;

или

const index = Array.prototype.indexOf.call(
  document.querySelectorAll('.class1'),
  document.querySelector('.class2')
);

Каждой паре input-картинка добавим общую обёртку:

<div class="country">
  <input class="country-code">
  <img class="country-flag">
</div>

Добавим параметр функции, обновляющей картинку - соответствующий картинке input. Из которого она прочитает код страны и через общего предка найдёт картинку:

function updateFlag(el) {
  const country = countries.find(n => !el.value.indexOf(n.code));
  el.closest('.country').querySelector('.country-flag').src = country ? country.flag : '';
}

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

document.addEventListener('input', function(e) {
  if (e.target.classList.contains('country-code')) {
    updateFlag(e.target);
  }
});

Чтобы при загрузке сразу были показаны картинки, вызовем функцию обновления для всех input'ов:

document.querySelectorAll('.country-code').forEach(updateFlag);

https://jsfiddle.net/z2u4sh7k/

<Switch>
    <div id="main" className="site__main">

Дочерними элементами Switch могут быть только Route или Redirect. Поменяйте их местами, что ли - пусть Switch будет внутри этого main'а.

Делаем массив стран с кодами и флагами:

const countries = [
  { code: ..., flag: ... },
  { code: ..., flag: ... },
  ...
];

Ищем совпадение с введёнными данными:

const country = countries.find(n => !inputCode.value.indexOf(n.code));
inputFlag.src = country ? country.flag : '';

https://jsfiddle.net/dskz4u7b

Имя задайте элементу. Типа, name="email".

Почему бы не воспользоваться готовым компонентом? Весьма вероятно, что там ваша проблема уже решена.

<input type="number" min="0" max="100">
<table>
  <tbody></tbody>
</table>

const input = document.querySelector('input');
const table = document.querySelector('table');

input.addEventListener('input', ({ target: t }) => {
  const count = t.value = Math.max(0, t.value | 0);
  const [ tbody ] = table.tBodies;
  const { rows } = tbody;

  for (; rows.length > count; tbody.deleteRow(-1)) ;

  while (rows.length < count) {
    const row = tbody.insertRow();
    row.insertCell().textContent = '#' + rows.length;
    row.insertCell().textContent = Math.random() * 1e3 | 0;
  }
});

// или

input.oninput = function() {
  const count = this.value = Math.max(0, +this.value || 0);
  const tbody = table.querySelector('tbody');
  const rows = tbody.children;

  Array.prototype.slice.call(rows, Math.min(rows.length, count)).forEach(n => n.remove());

  tbody.insertAdjacentHTML('beforeend', Array
    .from({ length: Math.max(0, count - rows.length) }, (n, i) => `
      <tr>
        <td>#${rows.length + i + 1}</td>
        <td>${Math.floor(Math.random() * 1000)}</td>
      </tr>`)
    .join('')
  );
};

Создаём объект, который установит соответствия между индексами и классами:

const classes = {
  0: 'first',
  [props.data.length - 1]: 'last',
};

И используем его: className={classes[i]}.

https://jsfiddle.net/w79a6q41/