0xD34F

<gmap-map
  ref="map"
  v-bind="options"
  @click="onMapClick"
>
  <gmap-marker
    v-for="m in markers"
    :key="m.id"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="onMarkerClick"
  />
</gmap-map>

data: () => ({
  options: {
    center: { lat: 45.101637, lng: 38.986345 },
    zoom: 15,
  },
  markers: [],
}),
methods: {
  onMapClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      position: e.latLng,
    });
  },
  onMarkerClick(e) {
    this.$refs.map.panTo(e.latLng);
    // или
    // this.options.center = e.latLng;
  },
},

https://codesandbox.io/s/blissful-fast-pjc7o

.hover {
  opacity: 0.5;
}

const map = document.querySelector('.map svg');
map.addEventListener('mouseover', onHover);
map.addEventListener('mouseout', onHover);

function onHover({ target: t }) {
  this.querySelectorAll('.hover-effect').forEach(n => {
    n.classList.toggle('hover', n !== t && this !== t);
  });
}

или, без js:

.map:hover .hover-effect {
  opacity: 0.5;
}

.map:hover .hover-effect:hover {
  opacity: 1;
}

Отправляйте наверх не только значение, но и имя параметра. Сами параметры соберите в один объект - так проще и ещё можно будет использовать v-model.

Если выводить в консоль то коллекции не чем не отличаются.

Это не так. В первом случае HTMLCollection, во втором NodeList. Отличие первой от второго состоит в том, что

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

То есть, обходите коллекцию, и одновременно модифицируете её. Удалили нулевой элемент - на его место встал первый, а индексу сделали ++. На следующей итерации удалять будете первый, и новый нулевой / бывший первый уже никуда не денется. Как и остальные элементы, изначально имевшие нечётные индексы.

Как удалять элементы динамической коллекции без пропусков:

// вариант раз - меняем направление обхода, от конца к началу:
for (let i = elements.length; i--;) {
  elements.item(i).replaceWith();
}

// вариант два - удаляем нулевой элемент коллекции, пока он существует:
for (let n; n = elements[0]; n.remove()) ;

foreach ($array as [ 'id' => $id, 'taste' => $taste ]) {
  $result[$id][$taste] = 1 + ($result[$id][$taste] ?? 0);
}

https://jsfiddle.net/4kgnz2x6/

метод, чьё имя состоит из трёх символов

О каких свойствах идёт речь: const keys = [ 'a', 'd', 'e', 'f' ];.

Собираем новые объекты:

const obj1 = {};
const obj2 = {};

for (const k in obj) {
  if (obj.hasOwnProperty(k)) {
    (keys.indexOf(k) > -1 ? obj2 : obj1)[k] = obj[k];
  }
}

или

const partition = (data, f) =>
  Array.prototype.reduce.call(
    data,
    (acc, n, i, a) => (
      acc[+!!f(n, i, a)].push(n),
      acc
    ),
    [ [], [] ]
  );

const [ obj1, obj2 ] = partition(
  Object.entries(obj),
  n => keys.includes(n[0])
).map(Object.fromEntries);

$('.scheme-wrap polygon').click(function() {
  $(`.scheme-wrap__item[data-id="${this.dataset.id}"] .scheme-wrap__popup`).show();
});

или

.scheme-wrap__popup.visible {
  display: block;
}

document.querySelectorAll('.scheme-wrap polygon').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { id } } }) {
  const selector = `.scheme-wrap__item[data-id="${id}"] .scheme-wrap__popup`;
  const popup = document.querySelector(selector);
  if (popup) {
    popup.classList.add('visible');
  }
}

Группируете данные по месяцам:

const groupedUsers = users && users.reduce((acc, n) => {
  acc[new Date(n.dob).getMonth()].users.push(n);
  return acc;
}, [...Array(12)].map((n, i) => ({
  month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
  users: [],
})));

Рендерите их, например (это сразу всё; если надо - можете выбирать какой-то конкретный месяц):

{groupedUsers && groupedUsers.map(n => (
  <div key={n.month}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id}>
        <h3>user #{user.id}</h3>
        <div>данные пользователя...</div>
      </div>
    ))}
  </div>
))}

Если буквально искать элемент "слева", то перебираем предыдущие элементы относительно кликнутой кнопки, пока не наткнёмся на инпут:

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('sbros')) {
    for (let el = e.target; el = el.previousElementSibling;) {
      if (el.classList.contains('fields')) {
        el.value = el.getAttribute('default-value');
        break;
      }
    }
  }
});

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

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.sbros')) {
    const el = t.closest('здесь селектор обёртки').querySelector('.fields');
    el.value = el.getAttribute('default-value');
  }
});

Ещё вариант - можно вычислять индекс кликнутой кнопки и обращаться к инпуту с таким же индексом:

const inputs = document.querySelectorAll('.fields');
const buttons = [...document.querySelectorAll('.sbros')];
buttons.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const el = inputs[buttons.indexOf(e.target)];
  el.value = el.getAttribute('default-value');
}

На части какого размера надо порезать объект: const chunkSize = 10;.

Режем:

const arr = [];
let i = -1;

for (const k in obj) {
  const j = (++i / chunkSize) | 0;
  (arr[j] = arr[j] || {})[k] = obj[k];
}

или

const chunked = (data, chunkSize) =>
  Array.from(
    { length: Math.ceil(data.length / chunkSize) },
    (n, i) => data.slice(i * chunkSize, (i + 1) * chunkSize)
  );

const arr = chunked(Object.keys(obj), chunkSize).map(n => {
  return n.reduce((acc, k) => (acc[k] = obj[k], acc), {});
});

или

function* chunked(data, chunkSize) {
  const iter = data[Symbol.iterator]();

  for (let chunk = [], n = {}; !n.done && (n = iter.next());) {
    if ((n.done && chunk.length) || (!n.done && chunk.push(n.value) === chunkSize)) {
      yield chunk;
      chunk = [];
    }
  }
}

const arr = Array.from(chunked(Object.entries(obj), chunkSize), Object.fromEntries);

Object.values(arr.reduce((acc, n) => {
  const k = n.value.fromVenueId.value;
  const v = n.value.totalUsers.value;

  (acc[k] = acc[k] || { fromVenueId: k, totalUsers: 0 }).totalUsers += v;

  return acc;
}, {}))

Вырезаете selectedProducts, вместо него используете в v-model свойства checked элементов products. Отключить чекбокс - свойства disabled у вас уже есть, просто привяжите их значения к чекбоксам.

<input
  type="checkbox"
  v-model="product.checked"
  :disabled="product.disabled"
>

Ну и в отсутствие selectedProducts следует переписать вычисляемое свойство totalPrice:

computed: {
  totalPrice() {
    return this.products.reduce((acc, n) => acc + n.checked * n.price, 0);
  },
},

event.target.tagName != 'button'

Ясно:

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

Есть и менее явный косяк в этой проверке - все ли существующие на странице кнопки должны что-то там удалять? Даже если сейчас это так, будет ли так всегда? Лучше проверять наличие класса:

event.target.classList.contains('remove-button')

// или

event.target.matches('.remove-button')

Сколько может быть элементов с одинаковыми id? - один. Там, где id повторяются, замените их классами.

$('.show').click(function() {
  $(this).hide().next('.var').slideDown().find('.hide').show();
});

$('.hide').click(function() {
  $(this).hide().closest('.var').slideUp().prev('.show').show();
});

У вас в школе по английскому была честная двойка, или давали взятки ради троек? Ну, то есть - откройте словарь, и посмотрите, как переводится слово "next". Потом посмотрите в каком порядке расположены ваши элементы.

Ключи добавьте.

Да, в документации говорится про ключи в связи со списками, но реально область их применения шире. Если хотите, чтобы какой-то элемент пересоздавался в случаях вроде вашего, надо назначить различные ключи элементам, создающимся в различных ветках switch'а, условного оператора и т.п. Например: ключей нет - ключи есть.

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

rating = Math.max(1, Math.ceil((e.clientX - горизонтальнаяКоординатаЭлемента) / ширинаЭлемента * 5))

https://jsfiddle.net/xqeLtz6r/