0xD34F

const urls = [ '...', '...', ... ];

Promise
  .all(urls.map(n => fetch(n).then(r => r.json())))
  .then(обработатьРезультаты)
  .catch(err => console.error(err));

function обработатьРезультаты(results) {
  ...
}

return [...el].map((n) => new Select(n));

Здесь всегда возвращается массив экземпляров базового класса.
А надо текущего - замените Select на this.constructor.

Object.values(city.reduce(
  (acc, n) => (acc[n.idMain]?.push(n), acc),
  Object.fromEntries(grop.map(n => [ n.idParent, [ n ] ]))
)).flat()

или

grop.flatMap(n => [ n, ...city.filter(m => m.idMain === n.idParent) ])

$grouped = [];

foreach ($arr as $n) {
  $grouped[$n['city']][] = $n;
}

Всё настолько плохо, что исправлять нечего. Можно переписать с нуля:

const checkedTexts = (el, selector) =>
  Array.from(el.querySelectorAll(`${selector}:checked`), n => n.parentNode.innerText);

const propertyText = (el, selector) =>
  el.querySelector(selector).innerText.split(': ')[1];

document.querySelector('.container-filter').addEventListener('input', function() {
  const maxPrice = parseInt(this.querySelector('.range').value);
  const brands = checkedTexts(this, '.input');
  const years = checkedTexts(this, '.input-date');

  document.querySelectorAll('.device .laptop').forEach(n => {
    const price = parseInt(propertyText(n, '.laptop-price'));
    const brand = propertyText(n, '.laptop-name');
    const year = propertyText(n, '.laptop-year');

    n.style.display = (
      (maxPrice >= price) &&
      (!brands.length || brands.includes(brand)) &&
      (!years.length || years.includes(year))
    )
      ? 'block'
      : 'none';
  });
});

Говнокод тот ещё получается - но тут уж таков исходный материал.

Вам стоит рассмотреть вариант с хранением информации о товарах в массиве, чтобы не приходилось выдирать её из разметки. Как оно могло бы быть.

const newStr = str
  .split(' ')
  .map(function([...word]) {
    const sorted = word.filter(this).sort((a, b) => b.localeCompare(a));
    return word.map(n => this(n) ? sorted.pop() : n).join('');
  }, RegExp.prototype.test.bind(/[a-z]/i))
  .join(' ');

str.replace(/(\d{2})(\d{2})/, '$1.$2.')
// или
str.replace(/(?=\d{4}$|\d{6}$)/g, '.')
// или
str.match(/(..)(..)(.+)/).slice(1).join('.')
// или
[ 0, 2, 4 ].map((n, i, a) => str.slice(n, a[i + 1])).join`.`
// или
[...str].reduce((acc, n, i) => acc + n + ([ ,'.',,'.' ][i] || ''))
// или
''.concat(...Array.from(str, (n, i) => '24'.includes(i) ? `.${n}` : n))

props.component || <a/>

props.component || 'a'

on: {
  breakpoint() {
    this.el.classList.toggle('класс', this.slides.length < this.params.slidesPerView);
  },
},

Забыли добавить ref={ref} элементу, который собираетесь скрывать.

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

Не могу закрыть поп-ап

dialog: [],

dialog[index]= false

Кто-то невнимательно читал документацию.

При нажатии на кнопку, при выборе 3 изображения на превью открывается всегда первое.

Не всегда, а при первом открытии каждого диалога.

Кстати, непонятно - а зачем вам три диалоговых окна? Сделайте одно:

data: () => ({
  slide: null,
  dialog: false,
  ...
}),
methods: {
  openDialog(slideIndex) {
    this.slide = slideIndex;
    this.dialog = true;
  },
  ...
},

v-row
  v-col(v-for="(n, i) in pictures")
    v-item
      v-img(height="100", width="100", :src="n", @click="openDialog(i)")
  v-col(hidden="")
    v-dialog(v-model="dialog")
      v-carousel(v-model="slide")
        v-carousel-item(v-for="n in pictures")
          v-img(:src="n")
      v-btn(@click="dialog = false") close dialog

В MainWindow должно быть так:

<div className="mainWindow">
  {this.props.children}
</div>

Компонент Field - откуда вы взяли, что внутрь input можно что-то помещать? Это непарный тэг. Закрывающий тэг вырезать, добавить слеш в конец открывающего. Что дальше - вам виднее, всё зависит от того, как вы предполагаете использовать props.data. Обернуть всё в label, или сделать data значением input'а.

Сначала пара слов о том, как правильно:

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

<posts :posts="$store.state.posts" />

Как видите, всё элементарно.

Передача же "через роутинг" обернётся говнокодерством:

• Можно сделать маршрут именованным и передавать через params:
  
  

  <router-link :to="{ name: 'home', params: { posts } }">home</router-link>

  
  

  this.$router.push({
    name: 'home',
    params: {
      posts: this.posts,
    },
  });

  
  Сразу же очевиден первый недостаток такого способа: в скольких местах осуществляется переход на роут home, столько раз придётся и передавать туда явным образом массив posts, указывая его в params каждого router-link или вызова $router.push. При этом, если переход осуществляется не из корневого компонента, то, чтобы дотянуться до posts, придётся ещё и $root использовать. В случае же, когда пользователь решит осуществить переход посредством адресной строки браузера, то ничего передать не получится.
  
  Ещё один недостаток станет очевидным после перехода - оказывается, элементы posts превратились в строки. Роутер приводит к строкам значения свойств params (или, если свойство является массивом, к строкам будут приведены его элементы). Так что для корректной передачи ещё придётся и в json данные конвертировать, а в компоненте home этот json парсить - говнокод, как и обещал.
  
  
• Можно прицепить данные к router-view, тогда они будут переданы как параметры в компонент текущего маршрута: <router-view :posts="post" />.
  
  Тут тоже не всё пройдёт гладко - так передача параметров будет осуществляться в компоненты всех маршрутов, и там, где переданные параметры не описаны, они будут сочтены атрибутами и прицеплены к корневому элементу (если он один; когда несколько - надо явным образом указывать, куда добавлять $attrs). Чтобы передавать что надо только куда надо, можно оформить параметры, передаваемые в router-view, как вычисляемое свойство, значение которого будет зависеть от текущего маршрута:
  
  

  computed: {
    routeParams() {
      return что-то, в зависимости от this.$route;
    },
  },

  
  <router-view v-bind="routeParams" />
  
  

Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

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

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

Повесить на таблицу обработчик клика; внутри проверять, кто был нажат - если кнопка, получить ближайшего предка, который является строкой таблицы:

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('save_order')) {
    const tr = t.closest('tr');  // всё, идентифицировали
  }
});

Удаляем один элемент:

arr.pop();

// или

arr.length -= !!arr.length;

// или

arr.splice(-1);

Удаляем несколько (const count = сколько надо удалить;):

for (let i = count; --i >= 0 && arr.length; arr.pop()) ;

// или

arr.length -= Math.max(0, Math.min(arr.length, count));

// или

count > 0 && arr.splice(-count);

echo implode('', array_map(function($author, $book) {
  return '<p>Книга '.$book['nameBook'].', ее написал '.$author['fio'].', '.$author['email'].'</p>';
}, $arr['authors'], $arr['books']));

Делегирование, назначаем обработчик события один раз для всех:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('rating__value')) {
    const value = +t.value;

    t.closest('.item-rating').querySelector('.rating__dynamic').innerHTML = Array
      .from({ length: 5 }, (n, i) => `<span class="char">${'☆★'[+(value > i)]}</span>`)
      .join('');
  }
});

document.querySelectorAll('.rating__value').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});

Или, каждому элементу индивидуально:

for (const n of document.getElementsByClassName('rating__value')) {
  n.previousElementSibling.innerHTML = '<span class="char"></span>'.repeat(5);
  n.addEventListener('input', onRatingInput);
  onRatingInput.call(n);
}

function onRatingInput() {
  const value = this.value | 0;
  const stars = this.previousElementSibling.children;

  for (let i = 0; i < stars.length; i++) {
    stars[i].innerText = value > i ? '★' : '☆';
  }
}

Прочтите хотя бы первые два абзаца.