0xD34F

Если количество уровней вложенности невелико и известно заранее, то... Для обработки каждого уровня вложенности используется отдельный <template v-for, ячейки с rowspan'ами создаются в зависимости от равенства индексов элементов вложенных массивов нулю, значения rowspan'ов - длины (суммы длин) вложенных массивов. Например:

const rowspan = item => item.backlinks.reduce((acc, n) => acc + n.recipients.length, 0);

<tbody>
  <template v-for="item in data">
    <template v-for="(backlink, iBacklink) in item.backlinks">
      <template v-for="(recipient, iRecipient) in backlink.recipients">
        <tr>
          <template v-if="!iBacklink && !iRecipient">
            <td :rowspan="rowspan(item)">{{ item.name }}</td>
            <td :rowspan="rowspan(item)">{{ item['domain score'] }}</td>
          </template>
          <template v-if="!iRecipient">
            <td :rowspan="backlink.recipients.length">{{ backlink.donor }}</td>
            <td :rowspan="backlink.recipients.length">{{ backlink['page score'] }}</td>
          </template>
          <td>{{ recipient.url }}</td>
          <td>{{ recipient.image }}</td>
        </tr>
      </template>
    </template>
  </template>
</tbody>

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

const keys = ref([
  'name', 'domain score', 'backlinks',
  'donor', 'page score', 'recipients', 
  'url', 'image',
]);

function createTableData(arr, keys, iKey = 0) {
  return arr.flatMap(n => {
    const row = [];
    const innerRows = [];

    for (let i = iKey; i < keys.length; i++) {
      const val = n[keys[i]];
      if (Array.isArray(val)) {
        innerRows.push(...createTableData(val, keys, i + 1));
        row.forEach(cell => cell.rowspan = innerRows.length);
        row.push(...innerRows.shift());
        break;
      } else {
        row.push({ text: val });
      }
    }

    return [ row, ...innerRows ];
  });
}

Преобразование вложенных данных в плоские можно оформить в виде вычисляемого свойства:

const tableData = computed(() => {
  return createTableData(props.data, props.keys);
});

Ну а построить таблицу на основе плоского массива - дело тривиальное:

<tbody>
  <tr v-for="row in tableData">
    <td
      v-for="cell in row"
      v-text="cell.text"
      :rowspan="cell.rowspan"
    ></td>
  </tr>
</tbody>

Потому что возможность указывать аргумент для v-model появилась в третьей версии vue.

Вместо v-model используйте sync.

<div v-once>
  <select ref="select" v-model="region"></select>
</div>

mounted() {
  const choices = new Choices(this.$refs.select);
  this.$watch(
    'regions',
    val => choices.setChoices(val, 'value', 'name', true),
    { immediate: true }
  );
  this.$on('hook:beforeDestroy', () => choices.destroy());
},

Назначайте класс в зависимости от значения свойства, которое будет устанавливаться в обработчиках onload и onerror. Например.

Для 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]
      ) {
        // ...
      }
    });
  },
  ...

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

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

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

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

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

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

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

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

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

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

<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/

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

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

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

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

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

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

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

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

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

vue3-mq

this.$mq

Что по этому поводу имеет сказать документация:

$mq has been removed as a global property and must now be injected into components that require it

Изменить отображаемый формат даты можно через соответствующий параметр компонента.

Иконки убираются с помощью css.

"Плейсхолдер" делается через дополнительную обёртку (UPD. Или его можно оформить как кастомную иконку).

const createTopic = () => ({
  text: '',
  subtopics: [ createSubTopic() ],
});

const createSubTopic = () => ({
  text: '',
});

const topics = reactive([ createTopic() ]);

<div v-for="(topic, iTopic) in topics">
  <div>
    <div>
      Topic #{{ iTopic + 1 }}:
      <input v-model="topic.text">
    </div>
    <div v-for="(subtopic, iSubtopic) in topic.subtopics">
      Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
      <input v-model="subtopic.text">
      <button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
    </div>
  </div>
  <button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>