0xD34F

def chunked(arr, chunk_size):
  return [ arr[i:i + chunk_size] for i in range(0, len(arr), chunk_size) ]


print(chunked([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], 4)) # [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9]]

Нормально, об этом прямо говорится в документации:

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

Работает. А кнопка горизонтально не по центру, потому что соответствующее центрирование не задано. Потому что justify-content распределяет содержимое блока вдоль главной оси, в качестве которой у вас установлена вертикальная (flex-direction: column).

Используйте align-items.

Делаем просто:

const result = arr.reduce((acc, n, i) => (
  (i & 1) || acc.push(0),
  acc[~-acc.length] += n,
  acc
), []);

Делаем сложно:

function chunked(data, chunkSize) {
  return Array.prototype.reduce.call(
    data,
    (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
    []
  );
}

function sum(data, val = n => n) {
  const getVal = val instanceof Function ? val : n => n[val];
  return Array.prototype.reduce.call(
    data,
    (acc, n) => acc + getVal(n),
    0
  );
}


const result = chunked(arr, 2).map(n => sum(n));

В родительском компоненте выполняйте привязку параметра isOpen с помощью директивы v-model, замените :is-open="item.isOpen" на v-model:is-open="item.isOpen".

Соответственно, в дочернем компоненте вместо прямого изменения значения параметра отправляйте новое значение родителю, замените isOpen = !isOpen на $emit('update:isOpen', !isOpen).

Через псевдоэлемент.

Если текст всегда одинаковый, тогда

.active {
  &::after {
    content: "hello, world!!";
  }
}

Если разный, положите его в data-атрибут:

<a class="tabs-select__button" data-text="hello, world!!">
<a class="tabs-select__button" data-text="fuck the world">

.active {
  &::after {
    content: attr(data-text);
  }
}

Соберём содержимое вложенных массивов в один:

const flatArr = arr.flatMap(n => Array.isArray(n.DOP) ? n.DOP : []);
// или
const flatArr = Array.prototype.concat.apply([], arr.map(n => n.DOP ?? []));
// или
const flatArr = arr.reduce((acc, n) => (n.DOP && acc.push(...n.DOP), acc), []);

Получим уникальные объекты:

const unique = Object.values(Object.fromEntries(flatArr.map(n => [ n.NAME, n ])));
// или
const unique = flatArr.filter(function({ NAME: n }) {
  return !(this[n] = this.hasOwnProperty(n));
}, {});
// или
const unique = flatArr.filter((n, i, a) => n === a.find(m => m.NAME === n.NAME));

function formatDate(str) {
  const d = new Date(str.replace('_', ' 1, '));
  d.setMonth(d.getMonth() - 1);
  return d.toLocaleDateString('en-US', {
    month: 'short',
    year: 'numeric',
  }).replace(' ', '_');
}

formatDate('Feb_2021') // "Jan_2021"
formatDate('Jan_2000') // "Dec_1999"

+str.match(/\d+/) || 'not a number'

this.setState(({ items }) => ({
  items: items.map((n, i) => ({ ...n, id: i })),
}));

Но вообще - зачем перезаписывать? Сразу кладите в стейт то, что нужно. Если, например, массив попадает в компонент через props, то

state = {
  items: this.props.items.map((n, i) => ({ ...n, id: i })),
}

Да, давайте опечатки будем вам исправлять. Флаг g на самом деле отсутствует. Смотрите внимательнее, куда вы его попытались вписать.

computed: {
  grouped() {
    return this.arr.reduce((acc, n) => ((acc[n.group] ??= []).push(n), acc), {});
  },
},

<v-expansion-panels>
  <v-expansion-panel v-for="(items, groupName) in grouped">
    <v-expansion-panel-header>{{ groupName }}</v-expansion-panel-header>
    <v-expansion-panel-content>
      <div v-for="n in items">{{ n.name }}</div>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

str.match(/(?<=\. ).+(?= \(%\))/)[0]

// или

str.replace(/^.*?\. | \(%\).*$/g, '')

// или

str.split('. ').pop().split(' (%)').shift()

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

const filter = (arr, str) => (arr || [])
  .map(n => ({ ...n, children: filter(n.children, str) }))
  .filter(n => n.name.includes(str) || n.children.length);

Применительно к vue - оформляете отфильтрованный массив как вычисляемое свойство:

computed: {
  filteredItems() {
    return filter(this.items, this.search);
  },
},

https://jsfiddle.net/pL2fh506/

Сделайте total вычисляемым свойством:

computed: {
  total() {
    return this.value1 * this.value2 + this.checkbox * 1000;
  },
},

preg_match_all('~[\w\-]+(=".*?")?~', $str, $matches);

arr.delete_if{|n| n.include?('')}

this.getRandomZ() не вычисляется

А с чего бы ему вычисляться? Вы же не вызвали полученную функцию. Вызовите - вычислится. Правда, результаты при каждом вызове будут разными. Потому что вызовы getRandomZ должны находится непосредственно в getRandomPolynom, а не в той функции, что он возвращает. Вызвали сколько надо раз, результаты сохранили, в возвращаемой функции подставляете:

const getRandomPolynom = () => {
  const [ A, B, C, D ] = Array.from({ length: 4 }, this.getRandomZ);
  return x => A * x ** 4 + B * x ** 3 - C * x ** 2 - D * x + 10;
};

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

const wrapper = document.querySelector('.wrap');
const html = '<div class="item active">5</div>';

Как получить последний вложенный элемент:

const last = wrapper.lastElementChild;

// или

const last = wrapper.querySelector(':scope > :last-child');

// или

const last = wrapper.children[wrapper.children.length - 1];

// или

const [ last ] = Array.prototype.slice.call(wrapper.children, -1);

Добавляем:

last.insertAdjacentHTML('beforebegin', html);

// или

last.before(...new DOMParser().parseFromString(html, 'text/html').body.childNodes);

// или

wrapper.insertBefore(document.createRange().createContextualFragment(html), last);

// или

last.outerHTML = html + last.outerHTML;