0xD34F

В первую очередь следует избавиться от копипасты в разметке. Видим группу схожих элементов - оставляем один, вешаем на него v-for, которому будет передаваться массив с данными. Блок базовой комплектации примет примерно такой вид:

baseOptions: [
  { name: 'Свойство 1', price: 10000 },
  { name: 'Свойство 2', price: 11000 },
  ...

<ul>
  <li v-for="n in baseOptions">{{ n.name }} ({{ n.price }})</li>
</ul>

Блок дополнительных опций - аналогично, но так эти опции можно выбирать, они, помимо имени и цены, будут содержать ещё одно свойство, отвечающее за состояние чекбоксов (связываются посредством v-model):

extraOptions: [
  { name: 'Пакет 1', price: 16000, checked: false },
  { name: 'Пакет 2', price: 17000, checked: false },
  ...

<div v-for="n in extraOptions">
  <input type="checkbox" v-model="n.checked">
  <label>{{ n.name }}</label>
</div>

Сделаем метод расчёта суммы. Он будет принимать массив опций и складывать их стоимость:

methods: {
  sum: arr => arr.reduce((acc, n) => acc + n.price, 0),

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

computed: {
  baseSum() {
    return this.sum(this.baseOptions);
  },
  extraSum() {
    return this.sum(this.extraOptions.filter(n => n.checked));
  },

Наконец, разберёмся с выводом сумм. Сделаем фильтр, где число будет приводиться к человекопонятному формату и добавляться наименование валюты:

filters: {
  price: val => `${val.toLocaleString()} р.`,

<span>{{ baseSum | price }}</span>

<span>{{ extraSum | price }}</span>

https://jsfiddle.net/3gmrs0o1/1/

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

Делайте так:

<gmap-info-window 
  :options="infoOptions" 
  :position="infoWindowPos" 
  :opened="infoWinOpen"
  @closeclick="infoWinOpen = false"
>
  {{ infoContent }}
</gmap-info-window>

onMarkerClick(e) {
  this.infoWindowPos = e.latLng; // задаём положение окна, над кликнутым маркером
  this.infoContent = JSON.stringify(e.latLng); // задаём контент окна, передаётся в слот
  this.infoWinOpen = true; // открываем окно
},

if (counting >= 10) {
   level++;
   counting = 0;

Разница между 10 и counting (кроме 10, может принимать значения 11, 12 или 13) теряется - поэтому ваши результаты меньше ожидаемых. Может, не стоит считать каждую десятку отдельно? - сложновато как-то. Сделайте общую сумму, а на каждой итерации делите её на 10:

function getScore(arr) {
  const points = [ 0, 40, 100, 300, 1200 ];

  let score = 0;
  let lines = 0;

  for (const n of arr) {
    score += points[n] * (1 + (lines / 10 | 0));
    lines += n;
  }

  return score;
}

$('.away-players').text(function(i, text) {
  return $('.subs-players td:even')
    .get()
    .map(n => $(n).text().split(', '))
    .reduce((text, n) => text.replace(n[1], `(${n.join(' ')})`), text);
});

Количество LI элементов заранее не известно, поэтому выполнять функцию WHEN с определенным количеством аргументов нет возможности.

Согласиться с подобным утверждением - вот с чем нет возможности:

$.when(...$('li').get().map(n => $.ajax())).then(/* выполняйте, чо там вам надо */);

Вместо this.data = new Proxy(... сделайте

return new Proxy(this, {
  get(target, name) {
    return name in target
      ? target[name]
      : `Свойства ${name} нет`
  },
});

https://www.npmjs.com/package/v-click-outside

Ну или самостоятельно можете это дело реализовать:

created() {
  const onClickOutside = e => this.opened = this.$el.contains(e.target) && this.opened;
  document.addEventListener('click', onClickOutside);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},

for (const [ k, v ] of new URLSearchParams(url.replace(/.*\?/, ''))) {
  document.querySelector(`#${k}`).value = v;
}

или

url
  .slice(url.indexOf('?') + 1)
  .split('&')
  .map(n => n.split('='))
  .forEach(n => document.getElementById(n[0]).value = n[1]);

или

const data = [...url.split('?').pop().matchAll(/([^&]+)=([^&]*)/g)];
for (let i = 0; i < data.length; i++) {
  document.querySelector(`[id="${data[i][1]}"]`).value = data[i][2];
}

выбирайте оба - деньги вам ни к чему

Функция получения имени месяца по его индексу, она нам ниже понадобится:

const getMonthName = iMonth =>
  new Date(0, iMonth).toLocaleString('ru-RU', { month: 'long' });

Сгруппированные данные оформляем в виде вычисляемого свойства.

Бежим по массиву исходных данных, получаем имя месяца, создаём в результирующем объекте массив группы, если таковой отсутствует, добавляем в него текущий элемент. Вот так всё просто:

computed: {
  groupedByMonth() {
    return this.items.reduce((acc, n) => {
      const key = getMonthName(n.date.split('-')[1] - 1);
      (acc[key] = acc[key] || []).push(n);
      return acc;
    }, {});
  },
},

<ul>
  <li v-for="(items, month) in groupedByMonth" :key="month">
    <h3>{{ month }}</h3>
    <ul>
      <li v-for="n in items" :key="n.id">{{ n }}</li>
    </ul>
  </li>
</ul>

Если нужны все месяцы, в том числе и те, за которые нет никаких данных, тогда сразу создаём массив на двенадцать элементов, каждый из которых содержит имя месяца и массив для сгруппированных данных. Бежим по исходному массиву, получаем индекс месяца, кладём текущий элемент в массив соответствующей группы. Тоже ничего сложного:

groupedByMonth() {
  return this.items.reduce((acc, n) => {
    acc[n.date.split('-')[1] - 1].items.push(n);
    return acc;
  }, Array.from({ length: 12 }, (_, i) => ({
    month: getMonthName(i),
    items: [],
  })));
},

<ul>
  <li v-for="{ items, month } in groupedByMonth" :key="month">
    <h3>{{ month }}</h3>
    <ul v-if="items.length">
      <li v-for="n in items" :key="n.id">{{ n }}</li>
    </ul>
    <div v-else>данных нет</div>
  </li>
</ul>

.animate {
  z-index: -1;
}

const id = /\d+(?=\?|$)/.exec(str)[0];

// или

const id = str.replace(/\?.*/, '').replace(/.*\D/, '');

// или

const id = str.split('?', 1).shift().split('-').pop();

// или

const [ id ] = new URL(str).pathname.match(/\d+/g).slice(-1);

Импортируете роутер в своём store.js:

import router from './router.js';

При создании url смотрите текущий маршрут:

const url = `/api/photos?${в зависимости от router.currentRoute}=true&page=${list}&limit=15`;

<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/

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