0xD34F

https://jsfiddle.net/thd7avy2/

параметр size не указан при вызове конструктора Ball

const { group } = await this.getOne(payload.id) || {};
if (!group) {
  ...

Переносите value из Home в родительский компонент, передаёте value и setValue в Home в качестве props. И во второй компонент тоже value передаёте. Ну и всё.

function openCity(e, city) {
  document.querySelectorAll('.tablink').forEach(n => {
    n.classList.toggle('active', city === 'All' || n === e.target);
  });

  document.querySelectorAll('.tabcontent').forEach(n => {
    n.style.display = city === 'All' || n.id === city ? 'block' : 'none';
  });
}

https://jsfiddle.net/wxz2koms/

На свойство компонента вешается наблюдатель, выполняющий обновление css-переменной. Например:

h1 {
  font-size: var(--h1-font-size);
}

<input v-model="fontSize" type="range">
<h1>hello, world!!</h1>

data: () => ({
  fontSize: 24,
}),
mounted() {
  this.$watch(
    'fontSize',
    val => this.$el.style.setProperty('--h1-font-size', `${val}px`),
    { immediate: true }
  );
},

document.querySelectorAll('.number').forEach(number => {
  const top = number.getBoundingClientRect().top;

  window.addEventListener('scroll', function onScroll() {
    if (window.pageYOffset > top - window.innerHeight / 2) {
      this.removeEventListener('scroll', onScroll);
      let start = +number.innerHTML;
      const interval = setInterval(function() {
        number.innerHTML = ++start;
        if (start >= number.dataset.max) {
          clearInterval(interval);
        }
      }, 5);
    }
  });
});

document.querySelector('input').addEventListener('input', function() {
  let dotCount = 0;

  this.value = this.value
    .replace(/[,.]/g, m => !dotCount++ ? '.' : '')
    .replace(/[^\d.]/g, '')
    .replace(/^0*./, m => m.slice(-1).replace('.', '0.'));
});

$(document).wheel(

Такого метода - wheel - нет.

var item =  $('#time');
if (e.deltaY > 0) item.scrollLeft += 100;

Откуда у jquery объекта возьмётся свойство, принадлежащее узлу DOM-дерева? Да ниоткуда. Чтобы изменить значение свойства узла, надо или достать его (узел) из jquery объекта, или воспользоваться предназначенным для этого методом:

$(document).on('wheel', function(e) {
  $('#time')[0].scrollLeft += e.originalEvent.deltaY > 0 ? 100 : -100;
  // или
  $('#time').get(0).scrollLeft += [ -100, 100 ][+(e.originalEvent.deltaY > 0)];
  // или
  $('#time').prop('scrollLeft', (i, val) => val + 100 * Math.sign(e.originalEvent.deltaY));
});

<Line redraw={true}

Проверяем, что возвращает оператор typeof:

const strings = arr.filter(n => typeof n === 'string');
const numbers = arr.filter(n => typeof n === 'number');
const booleans = arr.filter(n => typeof n === 'boolean');

Или, проверяем, что элемент и результат его преобразования в значение интересующего нас типа совпадают:

const strings = arr.filter(n => n === `${n}`);
const numbers = arr.filter(n => n === +n); // в отличие от typeof, отбрасывает NaN
const booleans = arr.filter(n => n === !!n);

Или, группируем массив по имени типа, а дальше извлекаем чего надо:

const groupedByType = arr.reduce((acc, n) => {
  const type = n == null ? `${n}` : n.constructor.name.toLowerCase();
  (acc[type] = acc[type] || []).push(n);
  return acc;
}, {});

const strings = groupedByType.string;

$('.wrap .item').css('height', function() {
  return $(this).prev('.block').height();
});

Где элементы находятся, что за элементы, какой класс будем добавлять/удалять:

const containerSelector = 'ul';
const itemSelector = 'li';
const activeClass = 'active';

Хотели на jquery? - ну типа вот:

const $containers = $(containerSelector).on('click', itemSelector, function(e) {
  const index = $(itemSelector, e.delegateTarget).index(this);
  $containers.find(`${itemSelector}.${activeClass}`).removeClass(activeClass);
  $containers.find(`${itemSelector}:eq(${index})`).addClass(activeClass);
});

Или, к чёрту jquery:

const containers = document.querySelectorAll(containerSelector);
containers.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  if (t = t.closest(itemSelector)) {
    const items = this.querySelectorAll(itemSelector);
    const index = Array.prototype.indexOf.call(items, t);
    containers.forEach(container => {
      container.querySelectorAll(itemSelector).forEach((n, i) => {
        n.classList.toggle(activeClass, i === index);
      });
    });
  }
}

https://jsfiddle.net/54yuaeLv/

например

Храните выбранные ответы в родительском компоненте, передавайте их в вопросы как параметры, при выборе ответа отправляйте его родителю.

:empty

Первые ячейки - у которых левая граница минимальна. Последние - у которых правая (левая граница + ширина) максимальна. Можно их найти и добавить какой-нибудь класс:

const td = [...document.querySelectorAll('table td')];
const first = td[0].offsetLeft;
const last = Math.max(...td.map(n => n.offsetLeft + n.offsetWidth));

td.forEach(n => (
  (n.offsetLeft === first) && n.classList.add('first'),
  (n.offsetLeft + n.offsetWidth === last) && n.classList.add('last')
));

const newArr = arr.reduce((acc, n) => (
  acc[n.month - 1] = n.sum,
  acc
), Array(12).fill(''));

или

const newArr = Array.from({ length: 12 }, function(_, i) {
  return this[-~i] || '';
}, Object.fromEntries(arr.map(n => [ n.month, n.sum ])));

или

const newArr = [];
for (let i = 0, j = 0; i < 12; i++) {
  newArr.push((arr[j] || {}).month === i + 1 ? arr[j++].sum : '');
}