0xD34F

Убрать обработку события keyup и привязку атрибута product_id; метод priceChange вырезать.

Заменить v-model="sum[product.id]" на :value="sum[product.id]" readonly.

Свойство sum сделать вычисляемым:

sum() {
  return Object.fromEntries(Object.entries(this.price).map(n => ([
    n[0],
    (this.result[n[0]] || 0) * n[1],
  ])));
},

const arr = str.split(/(?<=[A-Z]), /);

// или

const arr = str.match(/[^,\s][^,]*, [^,]+/g) ?? [];

// или

const arr = str
  .split(', ')
  .reduce((acc, n, i) => (
    (i & 1) || acc.push([]),
    acc[acc.length - 1].push(n),
    acc
  ), [])
  .map(n => n.join(', '));

re.search(r'(?<=[A-Z]{3})[a-z](?=[A-Z]{3})', s)

.hidden {
  display: none;
}

const filter = document.querySelector('.filter');

filter.addEventListener('change', function() {
  document.querySelectorAll('.cart-product').forEach(function(n) {
    n.classList.toggle('hidden', this.length && !this.includes(n.dataset.category));
  }, Array.from(this.querySelectorAll(':checked'), n => n.dataset.filter));
});

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

Попробуйте @click="e => e.stopImmediatePropagation()" в дочернем компоненте.

UPD. В комментариях выяснилось, что компонентов на самом деле три - в дочернем клики происходят тоже по экземпляру компонента.

Чтобы заработал модификатор stop, нужен объект события. Его можно прокидывать из компонента, на экземпляре которого ловите клик, т.е., там на корневом элементе должно быть @click="$emit('click', $event)". Или, добавляем модификатор native: @click.native.stop.

Обходите массив с точками, считаете количество положительных результатов вызовов containsLocation:

function showDotsCountInPolygon(e) {
  const dotsCountInPolygon = dots
    .filter(n => google.maps.geometry.poly.containsLocation(new google.maps.LatLng(n), this))
    .length;

  infoWindow.setContent(`Точек в полигоне: ${dotsCountInPolygon}`);
  infoWindow.setPosition(e.latLng);
  infoWindow.open(map);
}

polygon.addListener('click', showDotsCountInPolygon);

https://jsfiddle.net/awcu8de9/

Сперва превращаем плоский массив во вложенный:

function createTreeData(arr, idKey, parentKey) {
  const tree = Object.fromEntries(arr.map(n => [ n[idKey], { ...n, children: [] } ]));
  return Object.values(tree).filter(n => !tree[n[parentKey]]?.children.push(n));
}


const treeData = createTreeData(data, 'id', 'parent_id');

Затем можно собрать разметку дерева:

const createTreeHTML = data =>
  Array.isArray(data) && data.length
    ? `<ul>${data.map(n => `
         <li>
           ${n.name}
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(treeData));

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

const createTreeElement = data =>
  data instanceof Array && data.length
    ? data.reduce((ul, n) => (
        ul.append(document.createElement('li')),
        ul.lastChild.append(n.name, createTreeElement(n.children)),
        ul
      ), document.createElement('ul'))
    : '';


document.body.append(createTreeElement(treeData));

ИЛИ

Без создания промежуточного вложенного массива:

function createTreeElement(arr, idKey, parentKey) {
  const tree = arr.reduce((acc, { [parentKey]: n }) => (
    acc[n] = acc[n] ?? document.createElement('ul'),
    acc
  ), {});

  arr.forEach(n => (
    tree[n[parentKey]].append(document.createElement('li')),
    tree[n[parentKey]].lastChild.append(n.name, tree[n[idKey]] ?? '')
  ));

  return Object.values(tree).reduce((ul, n) => (
    n.parentNode || ul.append(...n.children),
    ul
  ), document.createElement('ul'));
  // или, если не надо объединять в общий список элементы, у которых разные корневые parent_id
  // return Object.values(tree).filter(n => !n.parentNode);
}


document.body.append(createTreeElement(data, 'id', 'parent_id'));

Делайте как вам удобнее. Как сказано в документации,

пользовательский хук не обязательно должен иметь конкретную сигнатуру. Мы можем решить, что он принимает в качестве аргументов, и должен ли он что-либо возвращать. Другими словами, всё как в обычных функциях.

Собираем новый массив:

const newArr = [...Array(num)].reduce((acc, n, i) => (
  acc[(index + i) % acc.length]++,
  acc
), [...arr]);

// или

const newArr = arr.map(function(n, i, a) {
  return n + this[0] + (((i - index) % a.length + a.length) % a.length < this[1]);
}, [ num / arr.length | 0, num % arr.length ]);

Обновляем существующий:

for (let i = num; i-- > 0; arr[(index + i) % arr.length]++) ;

// или

(function xxx(i) {
  if (--i >= 0) {
    arr[(index + i) % arr.length]++;
    xxx(i);
  }
})(num);

В чем моя ошибка?

В неприменении рекурсии:

const sum = val =>
  val instanceof Object
    ? Object.values(val).reduce((acc, n) => acc + sum(n), 0)
    : typeof val === 'number'
      ? val
      : 0;


console.log(sum(obj));

Но, конечно, можно и без неё:

function sum(val) {
  let result = 0;

  for (const stack = [ val ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      stack.push(...Object.values(n));
    } else if (n === +n) {
      result += n;
    }
  }

  return result;
}

str_replace([ ' ', ',' ], [ '', '.' ], $el1) * $el2

Чтобы ставший видимым .faq__answer не растягивал родительский элемент и, соответственно, не перемещал лежащие ниже .faq__question, надо задать ему position: absolute. И ещё z-index побольше, чем у .faq__quest, чтобы не прятался за ними.

Скрытие вопросов при открытии ответа - те, которые полностью перекрываются, их и так не будет видно, скрывать надо только один вопрос, тот, который частично перекрывается открытым ответом. Это такой, у которого верхняя граница меньше, а нижняя больше чем верхняя граница плюс высота открытого ответа - так что перебираем вопросы, расположенные после того, у которого открыли ответ, находим подходящий. Само скрытие можно реализовать через изменение прозрачности или переключение свойства visibility - так, чтобы элемент, будучи скрытым, продолжал занимать отведённое ему место.

https://jsfiddle.net/jsogh73b/

могу получить координаты

ну тогда нет проблем выполнить обратное геокодирование

array_column

Сделать компонент, предназначенный для отображения одного элемента массива (т.е., одного вложенного массива). Корневым узлом будет tbody - их в таблице может быть несколько. Нулевой элемент переданного массива отображается всегда, а остальные по условию. Как-то так:

props: [ 'items' ],
data: () => ({
  showAll: false,
}),

<tbody>
  <tr>
    <td>{{ items[0] }}</td>
    <td>
      <button
        v-if="items.length > 1"
        v-text="showAll ? '-' : '+'"
        @click="showAll = !showAll"
      ></button>
    </td>
  </tr>
  <template v-if="showAll">
    <tr v-for="n in items.slice(1)">
      <td>{{ n }}</td>
      <td></td>
    </tr>
  </template>
</tbody>

Ну и создаёте столько экземпляров этого компонента, сколько в массиве элементов:

<table>
  <v-tbody v-for="n in items" :items="n" />
</table>

https://jsfiddle.net/vx3k8bsh/

Индекс кастомного значения можно определить как разность текущего и минимального:

<template #thumb-label="{ value }">
  {{ ticksLabels[value - min] }}
</template>

Вместо input'ов сделайте select'ы:

computed: {
  items() {
    return this.ticksLabels.map((n, i) => ({
      text: n,
      value: this.min + i,
    }));
  },
},

от <v-select :items="items" v-model="range[0]"></v-select>
до <v-select :items="items" v-model="range[1]"></v-select>

Открываете спецификацию и смотрите, как выполняется сравнение.

Потому что селектор неправильный. Добавьте + перед .lov.