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/

Передавайте в Winner не количество голосов, а элемент smiles целиком. Да, Math.max получить его не поможет, придётся самостоятельно перебирать массив в поисках максимума.

const Winner = ({ winner }) => winner
  ? <div>{winner.text}: {winner.value}</div>
  : null;

class App extends React.Component {
  state = {
    winner: null,
    smiles: [ 128540, 128520, 128640, 128526, 128566 ].map((n, i) => ({
      id: i + 1,
      text: String.fromCodePoint(n),
      value: 0,
    })),
  }

  vote(index) {
    this.setState(({ smiles }) => ({
      winner: null,
      smiles: smiles.map((n, i) => i === index
        ? { ...n, value: n.value + 1 }
        : n
      ),
    }));
  }

  showWinner = () => {
    this.setState(({ smiles }) => ({
      winner: smiles.reduce((max, n) => max.value > n.value ? max : n),
    }));
  }

  render() {
    const { smiles, winner } = this.state;

    return (
      <div>
        <ul>
          {smiles.map((n, i) => (
            <li key={n.id}>
              <button onClick={() => this.vote(i)}>{n.text}: {n.value}</button>
            </li>
          ))}
        </ul>
        <button onClick={this.showWinner}>show winner</button>
        <Winner winner={winner} />
      </div>
    );
  }
}

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

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

v-bind:header="user"

v-slot:header="{ user }"

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

checkWinner(id) {
    console.log({[id]: Math.max(...Object.values(this.state))})

onClick={checkWinner}

Внутри метода думаете, что получаете id, а на самом деле объект события клика. Используете этот объект как имя свойства другого объекта, но ключами могут быть только строки, так что объект события клика будет преобразован в строку. [object Object] - дефолтное строковое представление объекта. Всё.

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

https://reactcommunity.org/react-transition-group/...

https://jsfiddle.net/j3902ws1/

useEffect(() => {
  const timeoutID = setTimeout(nextSlide, 3000);
  return () => clearTimeout(timeoutID);
}, [ currentIndex ]);

function f(&$x) {
  $x = 666;
}

f($xxx);

echo $xxx; // 666

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

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/

preg_replace('/([а-яё])([А-ЯЁ])/u', '$1. $2', $str)

или

implode('. ', preg_split('/(?<=[а-яё])(?=[А-ЯЁ])/u', $str))

setProducts(products => products.map(n => {
  const card = n.cards.find(m => m.id === id);
  return card
    ? {
        ...n,
        cards: n.cards.map(m => m === card
          ? { ...m, quantity: newQuantity }
          : m
        ),
      }
    : n
}));

str.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')

О каких кнопках и блоках идёт речь; по сколько блоков надо показывать при клике на кнопку; как показать блоки, если известна кликнутая кнопка:

const buttonSelector = '.added';
const itemSelector = '.added-block';
const activeClass = '_active';
const notActiveSelector = `${itemSelector}:not(.${activeClass})`;
const newActiveCount = 2;

function onButtonClick(button) {
  const items = [...button.parentNode.querySelectorAll(notActiveSelector)];
  items.slice(0, newActiveCount).forEach(n => n.classList.add(activeClass));
  button.disabled = items.length <= newActiveCount;
}

Назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));

Или, применяем делегирование:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    onButtonClick(button);
  }
});

вот так:

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>

function App() {
  const [ count, setCount ] = useState(() => +localStorage.getItem('count') || 0);

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [ count ]);

  const onClick = e => setCount(count => count + +e.target.dataset.change);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={onClick} data-change="+1">+</button>
      <button onClick={onClick} data-change="-1">-</button>
    </div>
  );
}

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>