0xD34F

const Property = ({ data, onDelete }) => (
  <div>
    #{data.id}
    <button onClick={onDelete}>Del</button>
  </div>
);

const ConstructorPage = () => {
  const [ properties, setProperties ] = useState([]);
  const delProperty = property => setProperties(properties.filter(n => n !== property));
  const addProperty = () => setProperties([
    ...properties,
    {
      id: 1 + Math.max(0, ...properties.map(n => n.id)),
    },
  ]);
  
  return (
    <> 
      <button onClick={addProperty}>Add</button>
      {properties.map(n => (
        <Property
          key={n.id}
          data={n}
          onDelete={() => delProperty(n)}
        />
      ))}
    </>
  );
};

const inputs = [...document.querySelectorAll('.input')];
inputs.forEach(n => n.addEventListener('input', onInput));

function onInput({ target: t }) {
  if (t.value.length === t.maxLength) {
    t.nextElementSibling?.focus();
  }

  if (inputs.every(n => n.value.length === n.maxLength)) {
    // здесь дёргаете свою функцию
  }
}

Действия пусть будут представлены в виде массива строк:

data: () => ({
  employees: [
    { ..., actions: [ 'delete', 'ещё что-то', 'и ещё' ] },
    ...
  ],
  ...

Таблицу оформить как отдельный компонент; для каждого из столбцов выделить отдельный слот, в который будут передаваться данные строки и столбца, их индексы; по умолчанию слоты выводят данные как они есть:

props: {
  columns: Array,
  data: Array,
},

<table>
  <thead>
    <tr>
      <th v-for="(col, colIndex) in columns" :key="col.key">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in data" :key="row.id">
      <td
        v-for="col in columns"
        :key="col.key"
        :data-label="col.label"
      >
        <slot
          :name="`column.${col.key}`"
          :col-data="col"
          :col-index="colIndex"
          :row-data="row"
          :row-index="rowIndex"
        >
          {{ row[col.key] }}
        </slot>
      </td>
    </tr>
  </tbody>
</table>

Ну а дальше просто передавайте в слот столбца actions соответствующие кнопки:

<v-table :columns="titles" :data="employees">
  <template #column.actions="{ rowData, rowIndex }">
    <div>
      <button
        v-for="action in rowData.actions"
        v-text="action"
        @click="onActionClick(action, rowData, rowIndex)"
      ></button>
    </div>
  </template>
</v-table>

methods: {
  onActionClick(action, row, index) {
    switch (action) {
      case 'delete':
        this.employees.splice(index, 1);
        return;

      case 'ещё что-то':
        this.сделатьЧтоТоЕщё(row);
        return;
    }
  },
  ...

<Pie
  cornerRadius={25}
  ...
>

const blockSelector = '.block';
const buttonSelector = `${blockSelector} .block__close`;

Делегирование, назначаем обработчик один раз:

document.addEventListener('click', e => {
  const block = e.target.closest(buttonSelector)?.closest(blockSelector);
  block?.parentNode.removeChild(block);
});

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

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

Разделить объект state - для каждого из его свойств сделать отдельный вызов useState.

Или копировать все свойства при обновлении: setState({ ...state, show: !state.show });.

не затрагивая строчку sort

users.sort((a,b) => a- b);

Значит, надо научить объекты представлять себя в виде числа.

Добавьте им

valueOf() {
  return this.age;
},

Или, замените toString на

[Symbol.toPrimitive](hint) {
  return hint === 'number'
    ? this.age
    : `${this.name} is ${this.age} y.o.`;
},

Неужели было так трудно открыть документацию?

<Column
  allowFiltering={false}
  ...
/>

const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Так, NS, хорошо.

const pathEl = document.createElement('path');

Плохо.

Object.defineProperty($auth, 'isPro', {
  get: () => store.getters.isPro,
});

const group = (arr, ...keys) =>
  arr.reduce(((key, acc, n) => (
    (keys.reduce((obj, k) => obj[n[k]] ??= {}, acc)[n[key]] ??= []).push(n),
    acc
  )).bind(null, keys.pop()), {});


const grouped = group(arr, 'order', 'user_id', 'stream_id', 'currency_id');

или

function group(data, keys) {
  const result = {};

  for (const n of data) {
    const objKeys = [].concat(keys(n));
    const arrKey = objKeys.pop();
    (objKeys.reduce((obj, k) => obj[k] ??= {}, result)[arrKey] ??= []).push(n);
  }

  return result;
}


// ваш случай
group(arr, n => [ n.order, n.user_id, n.stream_id, n.currency_id ])

// а вообще, группировать можно не только массивы; количество признаков группировки
// может отличаться для различных элементов; сами признаки и имена групп не обязаны совпадать
// с какими-либо свойствами элементов, а могут являться производными от них значениями
group('12+345-!aщСxE_VЖg', n => {
  const low = n.toLowerCase();
  return (
    low !== n.toUpperCase() ? [ 'буквы', n === low ? 'строчные' : 'заглавные' ] :
    Number.isInteger(+n)    ? [ 'цифры', (n & 1)   ? 'нечётные' :    'чётные' ] :
                              'другое'
  );
})

Заменить size на что-нибудь, что начинается с заглавной буквы, например:

const Headline = ({ children, className, size: Tag }) => {
  return <Tag className={classNames(s[Tag], className)}>{children}</Tag>;
};

Не работает потому, что работать нечему - вы не используете v-model. Документацию, судя по показанной чуши, вы вообще не читали (максимум, одним глазом глянули её пересказ каким-нибудь дегенератом на youtube'е). Это зря. Документацию читать надо. Вот прямо сейчас откройте и почитайте. Ну а пока читаете, исправим ваш говнокод.

В родительском компоненте заменить model="global" на v-model="global".

В дочернем, добавить:

model: {
  prop: 'model',
},
computed: {
  checked() {
    return this.model === this.value;
  },
},

а шаблон пусть будет такой:

<label :class="{ labelActive: checked }">
  <input type="radio" :checked="checked" @input="$emit('input', value)">
  {{ value }}
</label>

Рекурсия есть:

const find = (obj, key, val) =>
  obj instanceof Object
    ? obj[key] === val
      ? obj
      : Object.values(obj).reduce((found, n) => found ?? find(n, key, val), null)
    : null;


const obj = find(fractal, 'id', id);

Рекурсии нет:

function find(obj, key, val) {
  for (const stack = [ obj ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      if (n[key] === val) {
        return n;
      }

      stack.push(...Object.values(n));
    }
  }

  return null;
}

Будем использовать стек. В начале стек содержит единственное значение - то, которое передано в функцию. Цикл крутится до тех пор, пока стек не окажется пуст. На каждой итерации извлекаем значение из стека, если число - плюсуем к результату, если объект - добавляем значения его свойств в стек.

function sum(data) {
  let result = 0;

  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    stack.push(...(n instanceof Object ? Object.values(n) : []));
    result += typeof n === 'number' ? n : 0;
  }

  return result;
}

data: () => ({
  items: [
    { text: '...', price: ..., checked: false },
    { text: '...', price: ..., checked: false },
    ...
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.price * n.checked, 0);
  },
},

<div v-for="n in items">
  <label>
    <input v-model="n.checked" type="checkbox">
    {{ n.text }}
  </label>
</div>
<div>SUM: {{ sum }}</div>

$grouped = [];

foreach ($arr as [ 'parent' => $p, 'sub' => $s ]) {
  $grouped[$p] ??= [ 'parent' => $p, 'sub' => [] ];
  $grouped[$p]['sub'][] = $s;
}

$grouped = array_values($grouped);

const [ text, setText ] = useState('');
const [ swiper, setSwiper ] = useState(null);

useEffect(() => {
  if (swiper && text какой там вам нужен) {
    swiper.slideNext();
  }
}, [ swiper, text ]);

<Swiper
  onSwiper={setSwiper}
  ...

<input
  value={text}
  onChange={e => setText(e.target.value)}
  ...

debounce(getData(), 2000);

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

Кроме того, debounced функция при каждом рендере компонента должна быть одна и та же, так что завернём её в useCallback, а чтобы она использовала актуальное состояние, будем передавать его как параметр:

const getData = useCallback(debounce(query => {
  /*
   * здесь всё по-старому, кроме body: JSON.stringify({ query: state.query }),
   * надо заменить на body: JSON.stringify({ query }),
   */
}, 2000), []);

useEffect(() => {
  getData(state.query);
}, [ state.query ]);

data: () => ({
  year: null,
  month: null,
  day: null,
}),
computed: {
  daysCount() {
    const { year, month } = this;
    return year !== null && month !== null
      ? new Date(this.year, this.month + 1, 0).getDate()
      : 0;
  },
  date() {
    const { year, month, day } = this;
    return year !== null && month !== null && day !== null
      ? new Date(year, month, day)
      : null;
  },
},
watch: {
  daysCount(val) {
    if (this.day) {
      this.day = Math.min(this.day, val);
    }
  },
},

<select v-model="year">
  <option v-for="i in 30">{{ 2000 + i }}</option>
</select>
<select v-model="month">
  <option v-for="i in 12" :value="i - 1">
    {{ new Date(0, i - 1).toLocaleDateString('ru-RU', { month: 'long' }) }}
  </option>
</select>
<select v-model="day">
  <option v-for="i in daysCount">{{ i }}</option>
</select>