0xD34F

не затрагивая строчку 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>

Добавить в options interpolateNulls: true.

https://jsfiddle.net/duja84ys/

data: () => ({
  headers: [
    { key:       'name', label:       'ФИО' },
    { key: 'department', label:     'Отдел' },
    { key:   'position', label: 'Должность' },
    { key:   'hostname', label:    'Имя ПК' },
    { key:   'username', label:    'Учётка' },
  ],
  ...

<thead>
  <tr>
    <th v-for="n in headers">{{ n.label }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="employee in employees">
    <td v-for="n in headers" :data-label="n.label">{{ employee[n.key] }}</td>
  </tr>
</tbody>

<label>
  Город:
  <select id="city"></select>
</label>
<label>
  Линия:
  <select id="line"></select>
</label>
<label>
  Станция:
  <select id="station"></select>
</label>

fetch('https://api.hh.ru/metro/').then(r => r.json()).then(subwayData => {
  const city = document.querySelector('#city');
  const line = document.querySelector('#line');
  const station = document.querySelector('#station');

  const getLines = () => subwayData[city.value].lines;
  const update = (el, data) => {
    el.replaceChildren(...data.map((n, i) => new Option(n.name, i)));
    el.dispatchEvent(new Event('change'));
  };

  city.addEventListener('change', () => update(line, getLines()));
  line.addEventListener('change', () => update(station, getLines()[line.value].stations));

  update(city, subwayData);
});

.inputmask('aa\\|9999',