0xD34F

Кого надо объединить:

const arrs = [
  [ 1, 2, 3, 4 ],
  [ 5, 6, 7, 8 ],
  [ 9, 10, 11 ],
];

Объединяем:

const result = [];
const max = Math.max(...arrs.map(n => n.length));
const index = Array(arrs.length).fill(0);

for (let i = 0; i < max; i++) {
  for (let j = 0; j < index.length; j++) {
    if (index[j] < arrs[j].length) {
      result[result.length] = arrs[j][index[j]++];
    }
  }
}

или

const result = arrs
  .reduce((acc, arr) => (
    arr.forEach((n, i) => (acc[i] ??= []).push(n)),
    acc
  ), [])
  .flat();

const li = Array.prototype.filter.call(
  document.querySelector('ul').children,
  function(n) {
    return this.every(([ k, v ]) => v === n.querySelector(`.${k}`).innerText);
  },
  Object.entries(items)
);

или

const li = [];

COLLECT_LI:
for (const n of document.querySelectorAll('li')) {
  for (const k in items) {
    if (Object.hasOwn(items, k) && items[k] !== n.querySelector('.' + k).textContent) {
      continue COLLECT_LI;
    }
  }

  li.push(n);
}

Не выдумывайте, всё рендерится.

Почему видимых изменений нет? Потому что обновляете одно состояние, а рендер выполняете на основе другого, items в App и items в ElementsList - это разные массивы. Не надо никакого useState в ElementList, выполняйте рендер на основе prop'а; метод onDelete перенесите в App и тоже передавайте в ElementList через props.

Для vue 3 предназначена четвёртая версия роутера, а не третья:

- <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
+ <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

А вот это надо вырезать:

import VueRouter from 'vue-router'

Подписаться на события инициализации карты и изменения её границ. Получить границы видимой области карты. Перебрать массив данных, на основе которых создаются маркеры, проверяя, как координаты маркеров соотносятся с границами видимой области. Как-то так:

<yandex-map
  ref="map"
  @map-was-initialized="onBoundsChange"
  @boundschange="onBoundsChange"
  ...
>
  <ymap-marker
    v-for="n in markersData"
    ...
  >

methods: {
  onBoundsChange() {
    const bounds = this.$refs.map.myMap.getBounds();
    this.markersData.forEach(n => {
      if (
        bounds[0][0] < n.coords[0] && n.coords[0] < bounds[1][0] &&
        bounds[0][1] < n.coords[1] && n.coords[1] < bounds[1][1]
      ) {
        // ...
      }
    });
  },
  ...

$extract = fn($keys, $item) => array_combine($keys, array_map(fn($k) => $item[$k], $keys));

$grouped = [];
$productKeys = [ 'product_id', 'sku', 'quantity' ];
$orderKeys = array_diff(array_keys($arr[0] ?? []), $productKeys);

foreach ($arr as $n) {
  $id = $n['order_id'];
  $grouped[$id] ??= $extract($orderKeys, $n);
  $grouped[$id]['products'][] = $extract($productKeys, $n);
}

Всё получается, всё передаётся.

метод testemit компонента question не отрабатывает

А должен? Нет, не должен - вы его нигде не вызываете. Как и не используете в качестве обработчика событий - вижу, что $emit('testemit') есть, а вот @testemit="testemit" отсутствует.

Поиск тут сильно так себе, так что искать лучше через гугл. Лично я использую запрос следующего вида:

site:qna.habr.com <имя-пользователя> <тег> <чего ищем>

Отобрать вопросы/ответы - подписываетесь на интересующие вас теги, заходите в профиль, раздел "подписки", подраздел "теги", появится список тегов - рядом с каждым будут ссылки на списки соответствующих вопросов и ответов (конечно, если таковые у вас есть). Но, разумеется, можно и напрямую пройти, если знать, как нужный url выглядит. Вот ваш laravel, например.

Зайдите с другой стороны - вместо удаления того, чего больше нет, получите то, что есть, и замените массив:

tags = Array.from(new Set(data.flatMap(n => n.tags)));

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

tags.splice(0, tags.length, ...new Set(data.flatMap(n => n.tags)));

Сделать observable объект, содержащий ссылку на экземпляр компонента, в котором последний раз осуществлялся пользовательский ввод. Установить наблюдение за этой ссылкой, и если значение не совпадает с текущим экземпляром - сбрасывать значение input'а:

const lastEdited = Vue.observable({ instance: null });

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    lastEdited.instance = this;
  },
},
created() {
  this.$watch(() => lastEdited.instance, val => {
    if (val && val !== this) {
      this.$emit('input', '');
    }
  });
},
beforeDestroy() {
  if (lastEdited.instance === this) {
    lastEdited.instance = null;
  }
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/

Или можно шину событий применить. Если случилось изменение input'а пользователем, кидать событие, в качестве аргумента передавать ссылку на экземпляр компонента, в обработчике сравнивать значение аргумента и this, если не совпали - очищать input:

const eventBus = new Vue();

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    eventBus.$emit('clear-other-inputs', this);
  },
},
created() {
  const clear = e => e !== this && this.$emit('input', '');
  eventBus.$on('clear-other-inputs', clear);
  this.$on('hook:beforeDestroy', () => eventBus.$off('clear-other-inputs', clear));
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/1/

имеется pinia такого вида
<...>
export const useSearchStore = () => {

Ну и где тут Pinia? Где вызов defineStore?

const { search, updateSearchQuery } = useSearchStore();

Так нельзя:

Note that store is an object wrapped with reactive, meaning there is no need to write .value after getters but, like props in setup, we cannot destructure it

Вы вообще как, документацию пробовали открывать?

Исправляем:

Стор:

const useSearchStore = defineStore('search', () => {
  const search = ref('');
  const setSearch = val => search.value = val;
  return { search, setSearch };
});

Компонент search input:

const searchStore = useSearchStore();
const search = computed({
  get: () => searchStore.search,
  set: searchStore.setSearch,
});

<input v-model.trim="search">

Компонент search:

Не надо слушать никаких событий из search input, не надо трогать стор, уберите это всё отсюда.

Корневой компонент:

const searchStore = useSearchStore(); 
watch(() => searchStore.search, val => console.log(val));

Никак не использовать. Хотите тут computed - вместо одного значения пусть предоставляет массив:

const names = computed(() => list.map(n => (n.main ?? n.default).name));

<div v-for="n in names">
  {{ n }}
</div>

Асинхронная функция, внутри цикл:

async function getFirstLoadedImage(urls) {
  for (const n of urls) {
    try {
      return await loadImage(n);
    } catch (e) {}
  }

  throw 'ничего загрузить не удалось';
}

Или, рекурсия:

const getFirstLoadedImage = (urls, i = 0) => i < urls.length
  ? loadImage(urls[i]).catch(() => getFirstLoadedImage(urls, -~i))
  : Promise.reject('ничего загрузить не удалось');

Пользоваться этим, понятное дело, так:

getFirstLoadedImage(resolutions.map(n => `https://i.ytimg.com/vi/${videoId}/${n}.jpg`))
  .then(img => document.body.append(img))
  .catch(console.error);

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

document.querySelectorAll('.item-gallery').forEach(n => {
  Fancybox.bind(n, '[data-fancybox="single"]', {});
});

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.

Маркеры сложить в массив, по клику на кнопки доставать из массива маркер с тем же индексом, что и у кнопки, триггерить на нём событие клика. Как-то так.

Документация подсказывает, что есть такая штука, как

onClickCapture: A version of onClick that fires in the capture phase.