0xD34F

$grouped = [];

foreach ($items as $n) {
  $grouped[$n['type']] ??= [
    'type' => $n['type'],
    'typeAmount' => 0,
    'amount' => 0,
  ];

  $grouped[$n['type']]['typeAmount'] += $n['typeAmount'];
  $grouped[$n['type']]['amount'] += $n['amount'];
}

$grouped = array_values($grouped);

V-model="filterPriceFrom"

V-model="filterPriceTo"

props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],

Во-первых - серьёзно? Не видите разницы между большими и маленькими буквами? Это как? О том, что буквы бывают большие и маленькие, и что это не одно и то же, рассказывают в первом классе. Вам сколько лет, шесть? Пять?

Во-вторых, если бы вы составили себе труд открыть документацию, и прочесть, что там написано, то знали бы, что использовать v-model совместно с входными параметрами особого смысла нет. Потому что

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

Вот вам и ответ на ваш вопрос: данные не передаются потому, что не могут передаваться избранным вами способом, так уж устроен vue.

Теперь, что делать.

Внутри компонента заменяете все v-model="параметр" на

:value="параметр" @input="$emit('update:параметр', $event.target.value)"

Снаружи - привязываете значения с использованием модификатора sync, если используете вторую версию vue.
Или, через v-model с указанием имени параметра, в случае vue 3.

let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));

const result = arr.map((n, i) => n * matrix.reduce((acc, row) => acc + row[i], 0));

или

const result = Array(arr.length).fill(0);

for (const row of matrix) {
  for (const [ i, n ] of row.entries()) {
    result[i] += n * arr[i];
  }
}

Вместо click'а у кнопки обрабатывайте input у формы:

- document.querySelector('.calculate').addEventListener('click', function () {
+ document.querySelector('form').addEventListener('input', function () {

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

.min(6, passwordMessage) ---> .min(6, () => passwordMessage.value)

Потому что объект не реактивный. Надо в reactive завернуть.

public function expose() {
  return array_map(fn($n) => $n instanceof Text ? $n->expose() : $n, get_object_vars($this));
}

Сделайте свои "аргументы" функциями, которые будут использоваться в качестве значений параметров метода filter, например:

data: () => ({
  items: [ ... ],
  filters: [
    item => item.status === 'hello, world!!',
    item => item.price > 666,
    item => item.text.includes('fuck the world'),
  ],
}),
computed: {
  filteredItems() {
    return this.filters.reduce((items, filterFn) => items.filter(filterFn), this.items);
  },
},

const result = Array
  .from(letter, n => soundParts[Number.isNaN(+n) ? 'letter' : 'number'][n])
  .filter(Boolean);

или

const result = Object
  .entries(Object.assign({}, ...Object.values(soundParts)))
  .reduce((acc, n) => (letter.includes(n[0]) && acc.push(n[1]), acc), []);

str.match(/\]\s*(.+?)\s*#/)?.[1] ?? '< unknown >'

data(){
  return{
    Item: {
      ...

v-model="item.name"

Ну и как там у вас имя свойства начинается - с большой буквы или маленькой? Вы определитесь.

ADD_TO_PRODUCTS({commit}, item){
    commit('SET_PRODUCT_TO_STATE', item)
},

methods:{
  ...mapActions([
      'ADD_TO_PRODUCTS',
  ]),

@click="ADD_TO_PRODUCTS"

В экшене ожидается параметр, но вы ничего не передаёте. Точнее, не передаёте в явном виде - передаётся объект события клика. А надо item (Item?).

После того, как исправите косяки выше, у вас, вероятно, вылезет ещё один. С ним разбираться будете здесь.

Читая документацию - сложно полностью понять её.

Это потому что вы js не знаете. Если знать язык - понимать в документации нечего, всё становится ясно на ходу.

Может ли это означать, что frontend не мое

Может.

либо это стандартная ситуация и стоить продолжать?

Стандартная. Для не знающих js.

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

Короче, хотите освоить vue - освойте js.

const groupAdjacent = (arr, newGroup) =>
  arr.reduce((acc, n, i, a) => (
    (!i || newGroup(n, a[~-i])) && acc.push([]),
    acc.at(-1).push(n),
    acc
  ), []);


const result = groupAdjacent(arr, (c, p) => c.name !== p.name);

Оставить в datepicker'e просто дату, а дату с временем оформить как вычисляемое свойство.

for (let i in goods) {
  if (discounts.length === 0) {
    count = goods[i].value * goods[i].amount;
  }
  for (let j in discounts) {
    if (goods[i].name === discounts[j].name) {
      count =
        (goods[i].value - goods[i].value * discounts[j].discount) *
        goods[i].amount;
    } else {
      count = goods[i].value * goods[i].amount;
    }
  }
  sum += count;
  console.log(count, goods[i].name);
}

Зачем на каждой итерации цикла, ищущего скидку, пересчитывать цену? Предположим, нашли скидку для текущего товара, что дальше? Дальше, на следующей итерации, цена будет рассчитана заново, но уже без скидки - ведь объект скидки будет другим, будет соответствовать другому товару. Исключение - если скидка найдена на последней итерации.

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

for (const n of goods) {
  let s = n.value * n.amount;
  for (const m of discounts) {
    if (n.name === m.name) {
      s *= 1 - m.discount;
      break;
    }
  }
  sum += s;
}

Возможно есть лучший способ для решения такой задачи.

function totalCost(goods, discounts) {
  discounts = Object.fromEntries(discounts.map(n => [ n.name, 1 - parseFloat(n.discount) / 100 ]));
  return goods.reduce((acc, n) => acc + n.value * n.amount * (discounts[n.name] ?? 1), 0);
}

Array.from(word.matchAll(/[aeiouy]/gi), n => n.index)

или

[...word.toLowerCase()].reduce((acc, n, i) => ('aeiouy'.includes(n) && acc.push(i), acc), [])

или

Object.entries(word).filter(n => 'AaEeIiOoUuYy'.indexOf(n[1]) !== -1).map(n => +n[0])