0xD34F

Количество 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);
  });
}

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

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

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

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

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

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

https://jsfiddle.net/4kgnz2x6/

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

const partition = (obj, f) => Object
  .entries(obj)
  .reduce((acc, [ k, v ]) => (
    acc[+!f(k, v)][k] = v,
    acc
  ), [ {}, {} ]);


const [ otherObj, anotherObj ] = partition(obj, k => [ 'a', 'd', 'e', 'f' ].includes(k));

$('.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');
}