0xD34F

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>

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

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

const sortedData = useMemo(() => {
  return data
    .pages
    .flatMap(n => n.data)
    .sort((a, b) => b.liked.length - a.liked.length);
}, [ data ]);

<div className="App">
  {sortedData.map((item) => (
    <div>
    ...

print('\n'.join([ 'Список:', *test ]))

Выдернуть подстроки, состоящие из цифр, склеить через точку:

str.match(/\d+/g).join('.')

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>

dataset
Object.assign

$arr2 = array_combine(array_column($arr, 'sku'), $arr);
$result = array_map(fn($n) => $arr2[$n], $torgPred);

или

$result = array_filter($arr, fn($n) => in_array($n['sku'], $torgPred));