0xD34F

Интересно, а что имеет сказать документация по поводу функции обновления состояния? Да вот что:

React гарантирует, что идентичность функции setState стабильна и не изменяется при повторных рендерах.

Ничего оборачивать не надо.

Судя по

const appSingle = new Vue({

вы используете vue 2. В то время как имена классов соответствуют третьей версии (был ряд изменений):

.planslider-enter-from {

.planslider-leave-from {

Непосредственно к заявленной проблеме не относится, но мимо пройти никак нельзя:

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">

Заменить transition-group на transition. Убрать v-if и v-for. Сделать вычисляемое свойство, представляющее текущий элемент.

Object.keys(a).forEach(n => b.hasOwnProperty(n) && (a[n] = b[n]));

или

for (const [ k, v ] of Object.entries(b)) {
  if (a.hasOwnProperty(k)) {
    a[k] = v;
  }
}

Меняем transition на transition-group, сдвигаем его влево на ширину слайда; показываем слайды не с активного, а с предшествующего активному; чтобы не видеть, как первый слайд, ставший последним, уезжает в конец, задаём слайдам z-index. Вот говнокод.

function collectValues(target, ...sources) {
  const onInput = () => target.value = sources.map(n => n.value).join(', ');
  sources.forEach(n => n.addEventListener('input', onInput));
  return () => sources.forEach(n => n.removeEventListener('input', onInput));
}


collectValues(...document.querySelectorAll('input'));

Как это вообще работает?

Откройте документацию, и прочтите.

Как мне при срезе включать последний элемент списка?

Уберите -1, просто -3:.

data: () => ({
  items: Array.from({ length: 4 }, () => ({
    checked: false,
    value: '',
  })),
}),

<div v-for="(n, i) in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ i }}
  </label>
  <input v-if="n.checked" v-model="n.value">
</div>

<div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">

additional: this.visible ? { required } : {},

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

Object.values(arr.reduce((acc, { a, b }) => (
  (acc[a] ??= { a, items: [] }).items.push(b),
  acc
), {}))

Никакого "раньше времени", как написали, так и происходит:

1. Добавили обработчик на document
   
2. Изменили значение переменной
   
3. Событие клика, случившееся на node, всплывает, попадает в свежедобавленный обработчик из п. 1, значение переменной уже новое, потому что п. 2
   

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

document.addEventListener('click', ((val, e) => {
  console.log(val);
}).bind(null, isOpenInputForSearch));

Кастомизировать внешний вид содержимого столбцов можно через их слоты:

<v-data-table>
  <template #item.created_at="{ item }">
    {{ item.created_at.toLocaleDateString('ru-RU') }}
  </template>

toggle не срабатывает при клике на элемент. Не присваивает классы и не убирает.

А может, всё-таки срабатывает? Дважды - сначала добавляет класс, а затем убирает.

Клик происходит по label

А внутри label'а, предположу, есть ещё какой-то элемент, input, например? Здесь возникает вопрос уже к вам: о чём вы не знаете - о всплытии событий, или что клик по label'у вызывает клик по связанному элементу?

Предположу ещё - раз переключаете класс, то input является чекбоксом. Обрабатывайте на нём событие change вместо клика по label'у.

v-for="n in (condition ? items1 : items2)"

Можно в вычисляемое свойство завернуть:

computed: {
  items() {
    return condition ? this.items1 : this.items2;
  },
},

v-for="n in items"

Переименуйте value в initialValue (это, значит, чтобы название точнее отражало суть), selectedValue сделайте из вычисляемого свойства обычным:

data() {
  return {
    selectedValue: this.initialValue,
  };
},

Ну или подумайте ещё раз над тем, как собираетесь использовать этот компонент - может, он должен уметь работать с директивой v-model? Тогда перепишите сеттер следующим образом:

set(val) {
  this.$emit('input', val);
},

user = next((n for n in users if n['id'] == id), None)

$key = 'shipping_address';
$_arr1 = array_combine(array_column($arr1, $key), $arr1);

$result = [
  ...array_map(fn($n) => $n + ($_arr1[$n[$key]] ?? []), $arr2),
  ...array_diff_key($_arr1, array_combine(array_column($arr2, $key), $arr2))
];

new Date(date * 1000).toLocaleString('en-US', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
})

[...arr].sort().reduce((acc, n, i) => (
  (i && n.includes(acc[acc.length - 1])) || acc.push(n),
  acc
), [])

или

arr.filter((n, i, a) => !a.some((m, j) => i !== j && n.includes(m)))

На время загрузки данных вы уничтожаете компонент пагинации, соответственно, при каждом изменении страницы он создаётся заново - поэтому его внутреннее значение текущей страницы постоянно оказывается дефолтным.

Явно указывайте компоненту пагинации, какую страницу считать текущей (forcePage={currentPage}).

Уберите +1 из обработчика выбора страницы, добавляйте единицу при запросе (проще подправлять значение текущей страницы в одном месте, чем в двух - так бы пришлось ещё и -1 делать при указании страницы компоненту пагинации).

$arr = [ '...', '...', ... ];
$newStr = preg_replace('~'.implode('|', $arr).'~ui', '', $str);