0xD34F

const group = (arr, idKey, groupKey) =>
  Object.values(arr.reduce((acc, n) => (
    acc[n[idKey]] ??= { [idKey]: n[idKey], [groupKey]: [] },
    acc[n[idKey]][groupKey].push(n),
    acc
  ), {}));


const result = group(cars, 'make', 'attr');

Чтобы получить экземпляр корневого компонента, вам нужен результат выполнения mount, а не createApp. Документацию могли бы и открыть, даже читать не обязательно - просматривая наискосок, можно наткнуться на примеры, из которых всё понятно.

setData(result);

Значение result здесь всегда одно и то же, а если значение не изменилось - компонент не будет заново отрендерен.
Можно по-быстрому заставить работать так, как вы хотите, передавая копию объекта: setData({ ...result });.

phoneDisabled.addEventListener('input', function() {
  buttonDisabled.disabled = phoneMask.unmaskedValue.length !== 11;
});

str.slice(1, -1).split(', ')

// или

JSON.parse(str.replace(/[а-яё]+/g, '"$&"'))

// или

str.match(/[^\s\[\],]+/g) ?? []

coord.split(', ').map(Number)

// или

coord.match(/[\d.]+/g).map(n => +n)

// или

eval(`[${coord}]`)

// или

JSON.parse('['.concat(coord, ']'))

// или

Array.from(coord.matchAll(/[^, ]+/g), parseFloat)

for (const n of str.matchAll(/---([A-Z]+)---(.*?)(?=---|$)/g)) {
  console.log(n[1], n[2].trim());
}

По какой причине JS результатом к выражению 1.4 + 0.2 возвращает 1.5999999999999999?
Js как то странно считает числа, почему?
Откуда значения?
Почему в JS 0.1+0.2 не равно 0.3?
Почему JS складывает с разной точностью?
При складывании в js от куда-то берется 0.00000000000000001?
Откуда берутся сотые доли при умножении на дробное число?
Почему js так считает числа в данном примере?
Почему JS добавляет левые цифры?
Почему var a:Double =0.0, a += 0.1 дает не точный результат?

$('.item').on('mouseover', '.dot', function({ delegateTarget: t }) {
  $('.thumb-target', t).attr('src', $(this).data('img'));
  $('.dot', t).removeClass('select').filter(this).addClass('select');
});

или

document.querySelectorAll('.item').forEach(n => {
  n.addEventListener('mouseover', onMouseOver);
});

function onMouseOver({ target: t, currentTarget: ct }) {
  const dot = t.closest('.dot');
  if (dot) {
    ct.querySelector('.thumb-target').src = dot.dataset.img;
    ct.querySelectorAll('.dot').forEach(n => {
      n.classList.toggle('select', n === dot);
    });
  }
}

Инкапсуляция стилей реализуется путём добавления уникального (в пределах компонента) атрибута элементам и, соответственно, селекторам в css-коде. Вы создаёте элементы вручную, так что нужный атрибут у них отсутствует - поэтому стили не применяются. Чтобы применились, можно воспользоваться т.н. глубоким селектором - для этого замените .frame { на .slider /deep/ .frame {.

Коротко:

const sum = (...arr) => arr
  .flatMap(Object.entries)
  .reduce((acc, [ k, v ]) => (
    acc[k] = (acc[k] ?? 0) + v,
    acc
  ), {});

Длинно:

function sum() {
  const result = {};

  for (const n of arguments) {
    for (const k in n) {
      if (n.hasOwnProperty(k)) {
        if (!result.hasOwnProperty(k)) {
          result[k] = 0;
        }

        result[k] += n[k];
      }
    }
  }

  return result;
}

Использовать, понятное дело, так: const obj = sum(obj1, obj2);.

Визуал jsx элемента, как и вопросы форматирования времени и даты не так важны, как важно просто разобраться с возможной последовательностью действий, как все это описать.

Нечего тут описывать, всё тривиально:

arr.map(n => {
  const start = форматированное значение n.start_at;
  const end = форматированное значение n.end_at;

  return <span>{start} - {end}</span>;
})

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

Во-вторых:

Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся обработчики игнорируются.

Где элементы находятся, что за элементы, что делать при клике:

const container = document.querySelector('#element');
const itemSelector = '.someclass';

function onClick(e) {
  e.preventDefault();
  console.log(e.target.closest('li').dataset.id);
}

Слушаем клики непосредственно на элементах:

container.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

Или, применяем делегирование:

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    onClick(e);
  }
});

По одному работает, если отметить оба, то "Error in v-on handler: "TypeError: Cannot convert undefined or null to object"

Что возвращает validations, если оба значения true? Ничего. Пусть всегда будет объект:

validations() {
  return {
    life: this.property ? {} : { required: v => v },
    property: this.life ? {} : { required: v => v },
  };
},

<div>STATUS: {{ $v.$invalid ? 'ЖОПА' : 'OK' }}</div>

function sort(arr) {
  const obj = Object.fromEntries(arr.map(n => [ n.parent, n ]));
  const sorted = [];

  for (let item = obj['null']; item; item = obj[item.id]) {
    sorted.push(item);
  }

  return sorted;
}

или

function sort(arr, parent = null) {
  const item = arr.find(n => n.parent === parent);
  return item
    ? [ item, ...sort(arr, item.id) ]
    : [];
}

const newStr = new Date(str.split(' GMT', 1)[0])
  .toLocaleDateString('ru-RU')
  .split('.')
  .reverse()
  .join(', ');

или

const formatDateStr = function(str) {
  const [ , month, day, year ] = str.match(/(\S+) (\d+) (\d+)/);
  return [ year, this[month], day.padStart(2, 0) ].join(', ');
}.bind(Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  new Date(0, i).toLocaleString('en', { month: 'short' }),
  `${i + 1}`.padStart(2, 0)
])));


const newStr = formatDateStr(str);

$newText = preg_replace('~\b\d+:\d+\b~', '<a href="#">$0</a>', $text);