0xD34F

имеется 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.

Поставьте значение animation-delay в зависимость от индекса в v-for:

v-for="(n, i) in items"
:style="{ 'animation-delay': i * 0.5 + 's' }"

UPD. Вынесено из комментариев:

индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи

То есть, данные - это объект, а не массив? Никаких сложностей, всё предусмотрено - v-for для объектов выдаёт три значения, как раз для того, чтобы у свойств тоже мог быть индекс.

function merge($arrs, $idKey, ...$sumKeys) {
  $result = [];

  foreach (array_merge(...$arrs) as $n) {
    $id = $n[$idKey];
    $result[$id] ??= array_merge($n, array_combine($sumKeys, array_fill(0, count($sumKeys), 0)));

    foreach ($sumKeys as $k) {
      $result[$id][$k] += $n[$k];
    }
  }

  return array_values($result);
}


$result = merge($dates1, 'date', 'qty');

Получаем все возможные ключи; под каждый создаём пустой массив; при обработке объекта из исходного массива бежим по массиву ключей, добавляем в соответствующий массив значение из объекта или дефолтное - в зависимости от наличия ключа в объекте:

function groupValues(arr, defaultValue = null) {
  const keys = [...new Set(arr.flatMap(Object.keys))];
  return arr.reduce((acc, n) => {
    keys.forEach(k => acc[k].push(Object.hasOwn(n, k) ? n[k] : defaultValue));
    return acc;
  }, Object.fromEntries(keys.map(k => [ k, [] ])));
}


const result = groupValues(arr);

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

const groupValues = (arr, defaultValue = null) =>
  arr.reduce((acc, n, i, a) => (
    Object
      .keys(n)
      .forEach(k => (acc[k] ??= Array(a.length).fill(defaultValue))[i] = n[k]),
    acc
  ), {});

Внутри компонента:

<select>
  <template v-for="n in options">
    <option>
      <slot name="option" :option="n">{{ n }}</slot>
    </option>
  </template>
</select>

Снаружи:

<v-select :options="countries">
  <template #option="{ option }">{{ option.name }}</template>
</v-select>

https://jsfiddle.net/w6nuzamx/

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>

const useChunked = (data, chunkSize) =>
  useMemo(
    () => Array.prototype.reduce.call(
      data,
      (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
      []
    ),
    [ data, chunkSize ]
  );

const ChunkedListItem = ({ item }) =>
  <pre>{JSON.stringify(item, null, 2)}</pre>;

const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
  const rows = useChunked(items, inRow);

  return (
    <div className="chunked-list">
      {rows.map(row => (
        <ul>
          {row.map(n => <li><Item item={n} /></li>)}
        </ul>
      ))}
    </div>
  );
}

https://jsfiddle.net/7pq92ud8/1/

Правильно так, как вам удобно.

А ещё, чтобы научиться делать правильно, надо сперва сделать неправильно.

Так что реализовываете все варианты, какие только сможете придумать.

Если в реализованном что-то не устраивает, всегда можно оформить вопрос (конечно, сперва погуглив) - вот есть такой-то компонент, решает такую-то задачу, мне в нём не нравится то-то и то-то, какие есть способы сделать лучше?

Когда решите таким образом задач сорок-пятьдесят, начнёт приходить понимание, как делать правильно.

Сделайте отдельный компонент, который будет принимать getDayinLoop(worker.wrdays, mday) как параметр.

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

Первый компонент - внутри emit, снаружи обработчик события.

Второй компонент - внутри watch на параметр, снаружи привязка значения этого параметра (значение обновляется в обработчике события первого компонента); или, внутри метод, снаружи ref (вызываете метод в обработчике события первого компонента).