0xD34F

Почему же? Смысл есть - так вы станете говнокодером.

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

UPD. Вынесено из комментариев:

мне ж понятно будет

Не будет. Начните с изучения языка.

const getKeys = obj =>
  obj instanceof Object
    ? Object.entries(obj).flatMap(n => [ n[0], ...getKeys(n[1]) ])
    : [];


const keys = getKeys(obj);

или

function* getKeys(obj) {
  if (Object(obj) === obj) {
    for (const k in obj) if (obj.hasOwnProperty(k)) {
      yield k;
      yield* getKeys(obj[k]);
    }
  }
}


const keys = Array.from(getKeys(obj));
// или
for (const n of getKeys(obj)) {
  console.log(n);
}

Сколько свойств должно быть в объекте: const propsCount = 3;.

Собираем новый объект:

const newObj = Object.fromEntries(Object
  .entries(obj)
  .sort((a, b) => a[1] - b[1])
  .slice(-propsCount)
);

Удаляем свойства существующего:

Object
  .entries(obj)
  .sort((a, b) => b[1] - a[1])
  .slice(propsCount)
  .forEach(n => delete obj[n[0]]);

Установите наблюдение за свойством, которое должно содержать данные, в обработчике проверяйте, что пришедшее значение корректно, если да - выполняйте код, который сейчас у вас в mounted (конечно, уже без setTimeout'а):

watch: {
  данные: {
    immediate: true,
    handler(value) {
      if (value какой нужен) {
        делаете чего там вам надо
      }
    },
  },
},

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

computed: {
  данные() {
    return [ this.данные1, this.данные2, /* ... */ ];
  },
},
watch: {
  данные: {
    immediate: true,
    handler(value) {
      if (value.every(n => n какой нужен)) {
        делаете чего там вам надо
      }
    },
  },
},

смотрел документацию к компоненту, но...

плохо смотрели

mixin item(item)
  .inform-items__item(class=`inform-items__item_bg_${item.bg}`)

app.directive(directives);

Это ещё что за чертовщина? Открываете документацию, смотрите, какие параметры принимает directive.

str.match(/(?<=>)\d+/g) ?? []

// или

str.match(/>\d+/g)?.map(n => n.slice(1)) ?? []

// или

Array.from(str.matchAll(/>(\d+)/g), n => n[1])

''.concat(...Array.from(str, n => n.repeat(2)))
// или
str.replace(/./g, '$&$&')
// или
str.replace(/./g, m => Array(3).join(m))
// или
str.replace(/(?=.)/g, (m, i) => str[i])
// или
[...str].flatMap(n => Array(2).fill(n)).join('')
// или
[].map.call(str, n => `${n}${n}`).join``
// или
str.split('').reduce((acc, n) => acc + n + n, '')

Сложить объекты в массив, и

const averageAge = arr.reduce((acc, n) => acc + n.age, 0) / arr.length;

Это если делать просто и ровно то, что спрошено. Но можно решить задачу и в более общем виде - сделаем функцию, вычисляющую среднее передаваемого ей итерируемого объекта:

function avg(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let sum = 0;
  let count = 0;

  for (const n of data) {
    sum += getVal(n);
    count += 1;
  }

  return sum / count;
}

В вашем случае применять так: const averageAge = avg(arr, 'age');.

Другие варианты использования:

avg(Array(10).keys()) // 4.5
avg('12345', Number) // 3
avg(document.images, n => n.width) // сами посмотрите, сколько тут получится

https://pugjs.org/language/interpolation.html#stri...

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

var vm = new Vue({
    el: "#txt",

new Vue({ el: '#txt' })

Зачем?

Второй убрать, регистрацию компонента global разместить перед первым.

Если надо изменить одно слово с минимальной длиной:

const index = arr.reduce((min, n, i, a) => a[min]?.length <= n.length ? min : i, -1);
if (index !== -1) {
  arr[index] = arr[index][0].toUpperCase() + arr[index].slice(1);
}

Если слов с минимальной длиной может быть несколько и надо изменить все:

const [ indexes ] = arr.reduce((min, n, i) => (
  n.length < min[1] && (min = [ [], n.length ]),
  n.length === min[1] && min[0].push(i),
  min
), [ [], Infinity ]);

indexes.forEach(n => arr[n] = arr[n].replace(/./, m => m.toUpperCase()));

Select в качестве value принимает объект, массив объектов или null, а вы ему строку пытаетесь подсовывать (свойство value элемента массива options). Храните в качестве выбранных значений объекты, в обработчике события onChange не надо выдёргивать value из первого параметра, сохраняйте его целиком; или внутри CustomSelect выполняйте поиск нужного option'а по его value и передавайте найденное (или null, если поиск результатов не дал) в Select вместо строкового значения, получаемого из родительского компонента.

https://stackblitz.com/edit/react-ujjfee?file=src%...

const date = new Date(str.replace(/\S+/, m => m.split('.').reverse().join('-')));

или

const date = new Date(str.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1'));

или

const [ day, month, year, hours, minutes, seconds ] = str.split(/\D/);
const date = new Date(year, month - 1, day, hours, minutes, seconds);

или (day.js):

const date = dayjs(str, 'DD.MM.YYYY HH:mm:ss').toDate();

function sort([...arr]) {
  const max = arr.reduce((max, n) => max?.population > n.population ? max : n, null);
  return arr.sort((a, b) => a === max ? -1 : b === max ? 1 : a.city.localeCompare(b.city));
}

О каком классе идёт речь: const className = 'model';

Как получить элементы:

const elements = document.querySelectorAll(`.${className}`);
// или
const elements = document.getElementsByClassName(className);

Как извлечь из элемента его текст:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или (т.к. вложенных элементов нет, это тоже сработает как надо)
const getText = el => el.innerHTML;

Перебираем элементы, достаём тексты, склеиваем:

const result = Array.from(elements, getText).join(', ');

// или

const result = ''.concat(...[...elements].flatMap((n, i) => (
  n = getText(n),
  i ? [ ', ', n ] : n
)));

// или

const result = Array.prototype.reduce.call(
  elements,
  (acc, n, i) => acc + (i ? ', ' : '') + getText(n),
  ''
);

Вот reduce:

const { x: countX = 0, o: countO = 0 } = Array
  .from(str.toLowerCase())
  .reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});

А вот ещё короче без reduce'а:

const [ countX, countO ] = [ /x/i, /o/i ].map(n => ~-str.split(n).length);

почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться)

Да ну? А как вы это проверяли? По внешнему виду компонента? Вдруг обновление данных всё-таки происходит, а вот связанный с ним (обновлением) последующий рендеринг компонента - нет? Такое бывает.