0xD34F

А что, нормальные имена свойствам придумать было никак? Зачем все эти attr? Непонятно же ни хрена.

Чтобы не прописывать отдельно строки с rowspan'ами и без, добавьте в v-for индексы, которые затем проверяйте в v-if ячеек с rowspan'ами - рендерить их нужно только при нулевых значениях.

Почему выводится только objects[0]? Неужели в objects может быть только один элемент? Заверните то, что сейчас есть в ещё один template, в котором будет v-for по элементам objects.

Можно немного сократить обращения к вложенным свойствам - для этого деструктурируйте элементы массивов, перебираемых в v-for.

methods: {
  rowspan: attr1 => attr1.reduce((acc, n) => acc + n.attr3.length + 1, 0),
},

<template v-for="obj in objects">
  <template v-for="{ road, attr1, TOTAL } in obj.data">
    <template v-for="({ attr2, attr3, attr4 }, iAttr1) in attr1">
      <tr v-for="(attr3Item, iAttr3) in attr3">
        <td :rowspan="rowspan(attr1)" v-if="!iAttr1 && !iAttr3">{{ road }}</td>
        <td :rowspan="attr3.length" v-if="!iAttr3">{{ attr2 }}</td>
        <td>{{ attr3Item.road }}</td>
        <td>{{ attr3Item.cargo }}</td>
        <td>{{ attr3Item.amount }}</td>
        <td>{{ attr3Item.wo_nds }}</td>
      </tr>
      <tr>
        <td colspan="2">Итого {{ attr2 }}:</td>
        <td>{{ attr4.cargo }}</td>
        <td>{{ attr4.amount }}</td>
        <td>{{ attr4.wo_nds }}</td>
      </tr>
    </template>
    <tr>
      <td colspan="3">Итого {{ road }}:</td>
      <td>{{ TOTAL.cargo }}</td>
      <td>{{ TOTAL.amount }}</td>
      <td>{{ TOTAL.wo_nds }}</td>
    </tr>
  </template>
</template>

https://jsfiddle.net/ctnr98v7/4/

Конечно пропадает, он теперь в $scopedSlots.

Ну и разберитесь с именами:

v-bind:header="user"

v-slot:header="{ user }"

Привязываете параметр с именем header, а использовать пытаетесь user.

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

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

const filters = reactive({});

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

За которым установите наблюдение - там будут ваши debounce и отправка в стор:

watch(
  () => filters.search,
  debounce(search => store.commit('setFilters', { search }), 1500)
);

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

watch(
  store.state.filters,
  val => Object.assign(filters, val), { immediate: true }
);

https://jsfiddle.net/xs40j5o1/

вот так:

const disabled = ref(false);

<input :disabled="disabled">

<input type="checkbox" v-model="disabled">

Потому что используете третью версию vue, а документацию читали явно от второй, ведь, как известно,

The v-enter transition class has been renamed tov-enter-from

<RatingSelect v-model="rating" />

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  maxRating: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits([ 'update:modelValue' ]);

const selected = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
});

<li v-for="n in maxRating">
  <label>
    <input type="radio" :value="n" v-model="selected">
    {{ n }}
  </label>
</li>

data: () => ({
  buttons: [
    { className: 'btn1', text: 'Limit' },
    { className: 'btn2', text: 'Market' },
  ],
  active: 0,
}),

<button
  v-for="(n, i) in buttons"
  v-text="n.text"
  :class="[ 'btn', n.className, { 'active-btn': i === active } ]"
  @click="active = i"
></button>

или даже так (это если у кнопок числа в классах btn* действительно идут по порядку)

data: () => ({
  buttons: [ 'Limit', 'Market' ],
  active: 'Limit',
}),

<button
  v-for="(n, i) in buttons"
  :class="`btn btn${i + 1} ${n === active ? 'active-btn' : ''}`"
  @click="active = n"
>{{ n }}</button>

Вешать обработчик клика на экземпляр компонента смысла нет - он такого события не порождает. Придётся обращаться непосредственно к кластеризатору:

<YandexClusterer
  @vue:mounted="onClustererMounted"
  ...

methods: {
  onClustererMounted(e) {
    e.component.exposed.events.add('click', обработчикКлика);
  },
  ...

Чтобы не ловить клики с обычных меток, надо у них запретить всплытие соответствующих событий (@click.stop).

https://stackblitz.com/edit/vue-8tmom1?file=src%2F...

Вместо отдельных свойств на каждый попап сделайте одно - имя открытого:

data: () => ({
  openedPopup: null,
}),
methods: {
  togglePopup(popup) {
    this.openedPopup = this.openedPopup === popup ? null : popup;
  },
},

@click="togglePopup('search')"

v-show="openedPopup === 'search'"

Градиентом нарисовать:

const { filledColor: F, emptyColor: E, ...props } = defineProps({
  value: Number,
  maxValue: Number,
  segments: {
    type: Number,
    default: 5,
  },
  filledColor: {
    type: String,
    default: 'red',
  },
  emptyColor: {
    type: String,
    default: 'black',
  },
});

const background = val =>
  val >= 1 ? F :
  val <= 0 ? E :
             `linear-gradient(to right, ${F}, ${F}, ${val * 100}%, ${E} ${val * 100}%)`;

<div class="rating">
  <div
    v-for="i in segments"
    :style="{ background: background(value / maxValue * segments - i + 1) }"
    class="rating-segment"
  ></div>
</div>

data: () => ({
  count: 0,
}),
computed: {
  totalOfItem() {
    return this.count * this.price;
  },
},
watch: {
  totalOfItem(val, oldVal) {
    this.$emit('clicked', val - oldVal);
  },
},

<button @click="count--">sell</button>
<button @click="count++">buy</button>

Как засунуть значения выбранных чекбоксов в массив - рассказывается в документации.

Значение для чекбокса "выбрать всё" будет вычисляемым. Ничего не выбрано - false, всё выбрано - true, для остальных вариантов undefined, при котором в true будет выставляться indeterminate. Также у него будет сеттер - если попытаться назначить true, то выбранными должны стать все чекбоксы; если false, то никто.

Вот так:

const items = ref([
  { id:  69, title:  'hello, world!!' },
  { id: 187, title:  'fuck the world' },
  { id: 666, title: 'fuck everything' },
]);

const checked = ref([ 187 ]);
  
const isAllChecked = computed({
  get: () => ({
    0: false,
    [items.value.length]: true,
  })[checked.value.length],
  set: val => checked.value = val ? items.value.map(n => n.id) : [],
});

<div>
  <label>
    <input
      type="checkbox"
      v-model="isAllChecked"
      :indeterminate.prop="isAllChecked === undefined"
    >
    <b>Check all</b>
  </label>
</div>
<div v-for="n in items" :key="n.id">
  <label>
    <input type="checkbox" v-model="checked" :value="n.id">
    {{ n.title }}
  </label>
</div>

После очистки clearInterval он чудесно продолжает работать.

Брехня.

Не продолжает.

Или не он.

О каком интервале речь?

У вас их несколько.

На каждое изменение длины массива - новый интервал.

Может, не надо запускать новый, если один уже есть?

Добавить select'у поддержку директивы v-model:

props: {
  modelValue: {
    type: String,
    default: '',
  },
  ...

<select
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>
  <option
    v-for="n in options"
    v-text="n.label"
    :value="n.value"
  ></option>
</select>

В родительском компоненте, сделать свойство selected вместо числа массивом и хранить там выбранные значения:

data: () => ({
  selected: Array(10).fill(null),
  ...
}),
methods: {
  getValue(index) {
    this.active = index;
    console.log(this.selected[index]);
  },
},

<div
  v-for="(n, i) in selected"
  class="test__item"
  :class="{ test__item_active: i === active }"
>
  <span @click="getValue(i)">элемент списка</span>
  <Select v-model="selected[i]" :options="options" />
</div>

Не надо никакого watch, фильтрацию выполняйте прямо в computed:

const profilesSorting = computed(() => profiles
  .value
  .filter(n => n.id === filters.value.id)
  .sort(...)
  .slice(...)
);

из дочернего мне нужно передать именно ключ b в родительский

Не нужно.

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

Дочерний компонент: this.$emit('do-something').
Родительский компонент:

<child-component :object="objects.a" @do-something="doSomething('a')" />
<child-component :object="objects.b" @do-something="doSomething('b')" />
<!--> или <-->
<child-component v-for="(v, k) in objects" :object="v" @do-something="doSomething(k)" />

methods: {
  doSomething(key) {
    // чего-то делаете
  },
  ...

Или даже проще, без ключей. Так как, по вашим же словам, ключ вы передаёте, чтобы

затем пройтись по objects и при совпадении ключей (a, b или c) выполнить действия над значением

, то почему бы сразу не обращаться к нужному значению?

<child-component :object="objects.a" @do-something="doSomething(objects.a)" />
<child-component :object="objects.b" @do-something="doSomething(objects.b)" />
<!--> или <-->
<child-component v-for="n in objects" :object="n" @do-something="doSomething(n)" />

Ещё можно отправлять из дочернего компонента наверх сам объект: this.$emit('do-something', this.object). Тогда не придётся дублировать обращение к нему в родителе:

<child-component :object="objects.a" @do-something="doSomething" />
<child-component :object="objects.b" @do-something="doSomething" />
<!--> или <-->
<child-component v-for="n in objects" :object="n" @do-something="doSomething" />

Функция, превращающая плоский массив в дерево:

function createTree({
  data,
  key = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = Object.fromEntries(data.map(n => [
    n[key],
    { ...n, [childrenKey]: [] },
  ]));

  return Object.values(tree).filter(n => (
    !tree[n[parentKey]]?.[childrenKey].push(n)
  ));
}

Рекурсивный компонент v-tree, выводящий древовидные данные:

props: {
  items: {
    type: Array,
    default: () => [],
  },
  maxdepth: {
    type: Number,
    default: Infinity,
  },
},

<ul v-if="Array.isArray(items) && items.length && maxdepth > 0">
  <li v-for="n in items" :key="n.id">
    {{ n.value }}
    <v-tree :items="n.children" :maxdepth="maxdepth - 1" />
  </li>
</ul>

Как использовать:

data: () => ({
  treeData: createTree({
    data: flatData,
    parentKey: 'parent_id',
  }),
}),

// или

computed: {
  treeData() {
    return createTree({
      data: this.flatData,
      parentKey: 'parent_id',
    });
  },
},

<v-tree
  :items="treeData"
  :maxdepth="3"
/>

Демо.