0xD34F

<script src="script.js" />

Так нельзя:

In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.

1. Собрать из вложенных массивов один общий
   
2. Отсортировать полученный массив
   
3. Взять сколько надо первых/последних (зависит от направления сортировки) элементов
   

const result = arr
  .flatMap(n => n.subcategories)
  .sort((a, b) => a.rating - b.rating)
  .slice(-2);

Свойство coords - переместить из компонента с картой в vuex. Тогда в компоненте элемента списка можно будет делать что-то вроде @click="$store.commit('setCoords', marker.coords)".

Здесь useEffect не нужен. Замените его на useMemo или вообще не используйте никаких хуков, сразу доставайте нужное значение.

Там, внутри самой спецификации, всё объясняется:

1. Internal Methods and Internal Slots:
   
   

   Internal methods and internal slots are identified within this specification using names enclosed in double square brackets...

   
   
2. Well-Known Symbols:
   
   

   Within this specification a well-known symbol is referred to by using a notation of the form @@name...

   
   
3. Well-Known Intrinsic Objects:
   
   

   Within this specification a reference such as %name% means the intrinsic object...

   
   

let displayMessage = '';
doItems.forEach((item, i) => {
    displayMessage += `
    <li class="do__item">
        <input type="checkbox" id="do_${i}" ${item.checked ? 'checked': ' '}>
        <label for="do_${i}" class="${item.checked ? 'checked' : ' '}">${item.message}</label>
        <button class="remove" id="do_${i}">Delete</button>
    </li>`;
    block.innerHTML = displayMessage;
});

Установка значения block.innerHTML должна производиться после forEach'а, а не внутри.

UPD. Кстати, а какого хрена у вас элементы с одинаковыми id (input и button)?

data: () => ({
  sortBy: '',
  ...
}),

<v-btn @click="sortBy = 'имя_свойства_по_которому_надо_выполнить_сортировку'">click me</v-btn>

<v-data-table :sort-by.sync="sortBy">...</v-data-table>

Если при повторном клике надо переключать порядок сортировки, тогда так:

data: () => ({
  sortBy: [],
  sortDesc: [],
  ...
}),
methods: {
  sort(colName) {
    const sameCol = this.sortBy[0] === colName;
    const sortDesc = this.sortDesc[0];

    this.sortBy = sameCol && sortDesc ? [] : [ colName ];
    this.sortDesc = sameCol && sortDesc ? [] : [ sameCol ];
  },
  ...
},

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc">...</v-data-table>

В случае же сортировки по нескольким свойствам, метод sort будет выглядеть следующим образом:

sort(colName) {
  const index = this.sortBy.indexOf(colName);
  if (index === -1) {
    this.sortBy.push(colName);
    this.sortDesc.push(false);
  } else if (this.sortDesc[index]) {
    this.sortBy.splice(index, 1);
    this.sortDesc.splice(index, 1);
  } else {
    this.$set(this.sortDesc, index, true);
  }
},

А вообще, можно сделать совсем просто. Имитируется клик по заголовку указанного столбца, дальше компонент таблицы сам всё исполнит в лучшем виде:

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table ref="table">...</v-data-table>

methods: {
  sort(colName) {
    const index = this.свойство_описывающее_столбцы_таблицы.findIndex(n => n.value === colName);
    this.$refs.table.$el.querySelector('thead tr').cells[index].click();
  },
  ...
},

Определяете максимальное расстояние от курсора, на котором элементы должны начинать движение. По событию mousemove на родителе считаете расстояния до элементов (теорема Пифагора), тем, кто достаточно близко, задаёте translate. Чтобы смена положения была плавной, в стилях определяете transition для translate'а.

https://jsfiddle.net/w6jf480k/1/

const rows = [items.map(item => item)];

Что это и зачем? Вы явно не понимаете, что здесь делаете. Передавайте items в DataGrid как есть, не надо ерундой заниматься.

И как быть в случае подобных вложенностей, когда мне от объекта user нужен только его username?

А как же

Все делаю по образцу из официальной документации к Material

??

Там, в документации, есть пример того, как следует подсовывать значения, отсутствующие непосредственно в объекте строки. Добавьте в определение колонки valueGetter: params => params.row.user.username.

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

import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps';

components: {
  yandexMap,
  ymapMarker,
},
data: () => ({
  coords: null,
  markers: [],
  settings: { /* ... */ },
}),
methods: {
  onClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      coords: e.get('coords'),
    });
  },
},
async mounted() {
  await loadYmap({ ...this.settings, debug: true });

  ymaps.geolocation.get().then(res => {
    this.coords = res.geoObjects.position;
  });
},

<yandex-map
  v-if="coords"
  :coords="coords"
  @click="onClick"
>
  <ymap-marker
    v-for="n in markers"
    :key="n.id"
    :marker-id="n.id"
    :coords="n.coords"
  ></ymap-marker>
</yandex-map>

https://jsfiddle.net/f65hraxk/

data: () => ({
  slides: [
    'путь к первой картинке',
    'путь ко второй картинке',
    ...
  ],
}),

<slide v-for="(n, i) in slides" :index="i">
  <figure>
    <img :src="n">
  </figure>
</slide>

(\d+)\s*$

Родитель всегда общий? Если да, тогда добавьте в него свойство, которое будет указывать, в каком из экземпляров вашего компонента надо отображать дополнительные элементы. В качестве значения можно использовать индекс экземпляра, например (не обязательно, также подойдёт какое-нибудь свойство из объектов с данными, на основе которых создаются экземпляры компонента - главное, чтобы значения были уникальными, типа id):

data: () => ({
  items: [ ... ],
  active: null,
}),

<v-xxx
  v-for="(n, i) in items"
  :показыватьДополнительныйКонтент="active === i"
  @переключитьОтображениеДополнительногоКонтента="active = active === i ? null : i"
  ...

https://jsfiddle.net/kdg4qevp/

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

const xxx = Vue.observable({ active: null });

В свой компонент добавьте вычисляемое свойство, значение которого а) определяет необходимость демонстрации дополнительных элементов; б) зависит от свойства наблюдаемого объекта:

computed: {
  показыватьДополнительныйКонтент() {
    return xxx.active === this.какоеТоСвойствоСУникальнымЗначением;
  },
},

<div v-if="показыватьДополнительныйКонтент">
  ...
</div>

Также добавьте в свой компонент метод для переключения отображения дополнительного содержимого:

methods: {
  переключитьОтображениеДополнительногоКонтента() {
    xxx.active = this.показыватьДополнительныйКонтент
      ? null
      : this.какоеТоСвойствоСУникальнымЗначением;
  },
},

<button @click="переключитьОтображениеДополнительногоКонтента">
  {{ показыватьДополнительныйКонтент ? 'hide' : 'show' }}
</button>

https://jsfiddle.net/kdg4qevp/1/

newArr = list({ n[1]: n for n in array[::-1] }.values())

или, с сохранением исходного порядка:

newArr = [ n for n in array if n == next(m for m in array if m[1] == n[1]) ]

Вставить - никак. Строки в js изменять нельзя. Можно сделать новую:

const insert = (str, index, substr) =>
  str.replace(RegExp(`(?<=.{${index}})`), substr);

// или

const insert = (str, index, substr) =>
  str.replace(RegExp(`.{${index}}`), `$&${substr}`);

// или

const insert = (str, index, substr) =>
  str.length >= index ? str.slice(0, index) + substr + str.slice(index) : str;

Куда надо выводить номера слайдов:

const counterSelector = 'селектор элементов внутри слайдов, где должны отображаться их номера';

Выводим:

document.querySelectorAll(counterSelector).forEach((n, i, a) => {
  n.textContent = `${i + 1} / ${a.length}`;
});

Это если делать до инициализации слайдера (const swiper = new Swiper(...);), или среди его настроек отсутствует loop: true. В противном случае для вычисления количества слайдов придётся отбросить дубликаты, а индексы надо будет доставать из data-атрибута (UPD. Неактуально, начиная с девятой версии - дублирования слайдов больше нет):

const slidesCount = swiper
  .slides
  .filter(n => !n.matches('.swiper-slide-duplicate'))
  .length;

swiper.slides.forEach(n => n
  .querySelector(counterSelector)
  .innerText = `${-~n.dataset.swiperSlideIndex} / ${slidesCount}`
);

Радиокнопкам добавить data-атрибут, который будет содержать значение для плейсхолдера:

<input type="radio" name="method" data-placeholder="hello, world!!">
<input type="radio" name="method" data-placeholder="fuck the world">
<input type="radio" name="method" data-placeholder="fuck everything">

Как передать это значение из радиокнопки в инпут:

const updatePlaceholder = (input, radio) =>
  input.placeholder = radio.dataset.placeholder;
  // или
  // input.setAttribute('placeholder', radio.getAttribute('data-placeholder'));
  // input.attributes.placeholder.value = radio.attributes['data-placeholder'].value;

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

Обработчик события change можно сделать делегированным:

document.addEventListener('change', ({ target: t }) => {
  if (t.matches('input[name="method"]')) {
    updatePlaceholder(t.closest('form').querySelector('[name="wallet"]'), t);
  }
});

Или назначать каждой радиокнопке индивидуально:

const onChange = ({ target: t }) =>
  updatePlaceholder(t.form.elements.wallet, t);

for (const form of document.forms) {
  for (const radio of form.elements.method) {
    radio.addEventListener('change', onChange);
  }
}

$.param($(this).serializeArray().filter(n => +n.value && n.name !== 'mode'))

Это означает, что вы не знаете js.

Да и в целом - плохо понимаете смысл используемых вами слов. Какой шаблон, вы чего? Шаблон vue - это html, который компилируется в render-функцию. А вы что показали?