0xD34F

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

app.ifScroll =

Меняйте эту чушь на ifScroll.value =.

Куда и что надо добавить:

const containers = document.querySelectorAll('.parent');
const tag = 'div';
const className = 'child';

Добавляем:

containers.forEach((n, i) => {
  n.insertAdjacentHTML(
    'beforeend',
    `<${tag} class="${className}">${arr[i]}</${tag}>`
  );
});

// или

for (const [ i, n ] of containers.entries()) {
  n.append(Object.assign(document.createElement(tag), {
    className,
    innerText: arr[i],
  }));
}

// или

for (let i = 0; i < containers.length; i++) {
  const el = document.createElement(tag);
  el.classList.add(className);
  el.textContent = arr[i];
  containers[i].insertAdjacentElement('beforeend', el);
}

// или

(function add(i, n = containers.item(i)) {
  if (n) {
    n.appendChild(document.createElement(tag));
    n.lastChild.setAttribute('class', className);
    n.lastChild.insertBefore(new Text(arr[i]), null);
    add(-~i);
  }
})(0);

\.[a-z]+(-[a-z]+)*

const [ checked, setChecked ] = React.useState(false);

<input
  type="checkbox"
  checked={checked}
  onChange={e => setChecked(e.target.checked)}
  ...

<button
  disabled={!checked}
  ...

нет примера их использования

И не должно быть - всё более чем очевидно.

Конечно, для тех, кто о vue хоть что-то знает - например, что у vue есть документация. Тогда можно её открыть и прочитать там про ref:

<q-select
  ref="select"
  ...

<q-btn
  @click="$refs.select.showPopup()"
  ...

const createArr = length =>
  Array.from({ length }, (_, i) =>
    Array.from({ length }, (_, j) =>
      (i === j || i === length - j - 1) +
      ((i <= j && i <= length - j - 1) || (i >= j && i >= length - j - 1))
    )
  );

Собрать новый массив:

const newArr = arr.reduce((acc, n) => (
  acc.push({ ...n, fractionTotal: n.fraction + (acc.at(-1)?.fractionTotal ?? 0) }),
  acc
), []);

// или

const newArr = arr.map(function({ ...n }) {
  n.fractionTotal = this[0] += n.fraction;
  return n;
}, [ 0 ]);

Изменить существующий:

arr.forEach((n, i, a) => n.fractionTotal = n.fraction + (i && a[i - 1].fractionTotal));

// или

arr.reduce((acc, n) => n.fractionTotal = acc + n.fraction, 0);

chunk_size = 3
sums = [ sum(arr[i:i + chunk_size]) for i in range(0, len(arr), chunk_size) ]

const createTable = (
  rows,
  cols,
  cell,
  {
    rowSeparator = '\n',
    colSeparator = '',
  } = {},
) =>
  Array.from({ length: rows }, (_, i) =>
    Array.from({ length: cols }, (_, j) =>
      cell(i, j)
    ).join(colSeparator)
  ).join(rowSeparator);

console.log(createTable(8, 8, (i, j) => (i ^ j) & 1));

document.body.innerHTML = createTable(
  30,
  50,
  (i, j) => (i + j) % 2,
  { rowSeparator: '<br>' }
);

Как сортировать по нескольким параметрам:

const sorted = (data, keys) => Array
  .from(data, n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    for (let i = 0; ++i < a.length && !(diff = ((a[i] < b[i]) ? -1 : +(a[i] > b[i])));) ;
    return diff;
  })
  .map(n => n[0]);

Как сортировать дочерние элементы:

const sortChildren = (el, keys) =>
  el.append(...sorted(el.children, keys));

Сортируем:

const ul = document.querySelector('ul');

ul.addEventListener('change', e => sortChildren(
  e.currentTarget,
  el => [
    -el.querySelector('input').checked,
    el.innerText.trim().toLowerCase(),
  ]
));

ul.dispatchEvent(new Event('change'));

arr.filter(RegExp.prototype.test.bind(/^[рим]*$/i))

// или

arr.filter(n => !n.match(/[^рим]/i))

// или

arr.filter(n => !n.replace(/р|и|м/gi, ''))

// или

arr.filter(n => [...n.toLowerCase()].every(m => 'рим'.includes(m)))

Делаем ровно то, что спрошено:

const result = Object.values(data.reduce((acc, n) => (
  (acc[n.brand] ??= { ...n, price: 0 }).price += n.price,
  acc
), {}));

Или, решаем задачу в более общем виде:

function uniqueWithSum(data, key, sumKey) {
  const getKey = key instanceof Function ? key : n => n[key];
  const unique = new Map;

  for (const n of data) {
    const k = getKey(n);
    unique
      .set(k, unique.get(k) ?? (u => (u[sumKey] = 0, u))(structuredClone(n)))
      .get(k)[sumKey] += n[sumKey];
  }

  return [...unique.values()];
}

// ваш случай
const result = uniqueWithSum(data, n => n.brand, 'price');

// элементам исходного массива не обязательно быть объектами
uniqueWithSum([
  [ 'aaa',   1 ],
  [ 'aaa',  10 ],
  [ 'aaa', 100 ],
  [ 'bbb', 666 ],
], 0, 1) // [ [ 'aaa', 111 ], [ 'bbb', 666 ] ]

kind[outs["name"]] = kind[outs["id"]]

Откуда в kind возьмутся id? Он же пустой. Может, должно было быть kind[outs["name"]] = outs["id"]?

Вместо заворачивания ul в transition следует завернуть li в transition-group:

<transition-group tag="ul" name="fade" class="buttons">
  <li
    v-if="какое здесь будет условие, предлагаю подумать самостоятельно"
    ...

const itemSelector = '.radio';
const activeClass = 'active';

// конечно, вы можете и дальше продолжать ковырять jquery
const $items = $(itemSelector).on('change', function() {
  $items.next().removeClass(activeClass);
  $(this).next().addClass(activeClass);
});

// но ведь есть и другой путь
const items = document.querySelectorAll(itemSelector);
const onChange = ({ currentTarget: t }) =>
  items.forEach(n => n.nextElementSibling.classList.toggle(activeClass, n === t));

items.forEach(n => n.addEventListener('change', onChange));

UPD. Наконец-то дождались, теперь использовать js тут необязательно:

.radio:has(:checked) + .order__form-input {
  /* сюда переносим стили, делающие input видимым */
}

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

Почему у элементов радиогрупп отдельные свойства checked? - активным же может быть только один. Пусть checked будет у самих радиогрупп и хранит не логическое значение, а индекс/id/value активного элемента.

Как исполнены сами радиокнопки (кстати, а почему не показали шаблон?)? Если input'ми, используйте v-model вместо того, чтобы вручную обновлять свои данные.

arr.reduce((acc, n) => (
  Object.entries(n.json_build_object).forEach(([ k, v ]) => {
    (acc[k] ??= []).find(m => m.id === v.id) || acc[k].push(v);
  }),
  acc
), {})

links.reduce((acc, n) => {
  const path = n.url.split('/');
  const [ lastFolder ] = path.splice(-2);
  (path.reduce((p, c) => p[c] ??= {}, acc)[lastFolder] ??= []).push(n);
  return acc;
}, {})

или

links.reduce((acc, n) => (
  n.url
    .match(/[^\/]+(?=\/)/g)
    .reduce((p, c, i, a) => p[c] ??= (-~i < a.length ? {} : []), acc)
    .push(n),
  acc
), {})

Перестаньте заниматься ерундой и замените div'ы на ol + li.