0xD34F

Сообщение об ошибке, согласно документации 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.prototype.reduce.call(letter, (acc, n) => (
  (n = soundParts[Number.isNaN(+n) ? 'letter' : 'number'][n]) && acc.push(n),
  acc
), []);

или

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 result = arr.reduce((acc, n, i, a) => (
  (i && n.name === a[~-i].name) || acc.push([]),
  acc.at(-1).push(n),
  acc
), []);

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

function groupAdjacent(
  data,
  {
    key = n => n,
    newGroup = (c, p) => c !== p,
  } = {}
) {
  const getVal = key instanceof Function ? key : n => n[key];

  return Array.prototype.reduce.call(
    data,
    (acc, n, i) => {
      const v = getVal(n, i);
      const iGroup = acc[0].length - (i && !newGroup(v, acc[1]));
      (acc[0][iGroup] ??= []).push(n);
      acc[1] = v;
      return acc;
    },
    [ [], null ]
  )[0];
}

const result = groupAdjacent(arr, { newGroup: (c, p) => c.name !== p.name });
// или
const result = groupAdjacent(arr, { key: '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);
}

let letters = 'АаЕеIiOoUuYy'  //Создал переменную со строкой с гласными

Почему символы из разных алфавитов? - первые четыре кириллические.

if (arg1[i] == letters[j]) {  //Если элемент слова равен элементу строки с согласными
  newArr.push(arg1[i].indexOf())  //То пушу в массив индексы гласных этого слова
}

Зачем тут indexOf (кстати, вы не знаете, что он делает, откройте документацию и разберитесь)? Что является индексом проверяемого символа? Строчкой выше ещё помнили, а когда до push'а дело дошло, уже забыли? Просто .push(i).

Не ошибка, но упомянуть косячок стоит - после найденного совпадения продолжать крутить внутренний цикл смысла нет. Гуглите, как прервать цикл.

Ну и это, как ещё можно сделать:

const getVowelsIndexes = str =>
  Array.from(str.matchAll(/[aeiouy]/gi), n => n.index);

или

const getVowelsIndexes = ((vowels, str) =>
  Array.prototype.reduce.call(
    str.toLowerCase(),
    (acc, n, i) => (vowels.has(n) && acc.push(i), acc),
    []
  )
).bind(null, new Set('aeiouy'));

или

const getVowelsIndexes = str => Object
  .entries(str)
  .filter(n => 'AaEeIiOoUuYy'.includes(n[1]))
  .map(n => +n[0]);

или

const getVowelsIndexes = str =>
  eval(`[${[...str]
    .map((n, i) => /a|e|i|o|u|y/i.test(n) ? `${i},` : '')
    .join('')
  }]`);

Зачем отдельный массив checked? Пусть notes вместо массива строк будет массивом объектов, состоящих из двух свойств - text и checked. Наблюдатель c deep: true, сохраняющий данные в localStorage уже есть, так что никаких дополнительных действий предпринимать не придётся.

UPD. Как это может выглядеть:

<div id="app">
  <div>
    <input v-model="newTaskText" @keypress.enter="addTask">
    <button @click="addTask">add</button>
  </div>
  <hr>
  <ol v-if="tasks.length">
    <li v-for="(n, i) in tasks">
      <label :class="{ 'task-checked': n.checked }">
        <input type="checkbox" v-model="n.checked">
        {{ n.text }}
      </label>
      <button @click="delTask(i)">del</button>
    </li>
  </ol>
  <strong>Total: {{ tasks.length || 'no tasks fucking exist' }}</strong>
</div>

.task-checked {
  text-decoration: line-through;
}

Vue.createApp({
  data: () => ({
    newTaskText: '',
    tasks: JSON.parse(localStorage.getItem('tasks')) ?? [],
  }),
  watch: {
    tasks: {
      deep: true,
      handler: val => localStorage.setItem('tasks', JSON.stringify(val)),
    },
  },
  methods: {
    addTask() {
      const text = this.newTaskText.trim();
      if (text) {
        this.tasks.push({
          text,
          checked: false,
        });

        this.newTaskText = '';
      } else {
        alert('fuck off');
      }
    },
    delTask(index) {
      if (confirm('really?')) {
        this.tasks.splice(index, 1);
      }
    },
  },
}).mount('#app');

const getData = type => fetch(`https://jsonplaceholder.typicode.com/${type}`).then(r => r.json());

const [ data, setData ] = useState([]);

useEffect(() => {
  Promise
    .all([ 'posts', 'users' ].map(getData))
    .then(([ posts, users ]) => {
      const usersObj = Object.fromEntries(users.map(n => [ n.id, n ]));
      setData(posts.map(n => ({
        post: n,
        user: usersObj[n.userId],
      })));
    });
}, []);

return (
  <div>
    {data.map(({ post, user }) => (
      <div>
        <h2>{post.title}</h2>
        <h3>{user.name}</h3>
        <p>{post.body}</p>
      </div>
    ))}
  </div>
);

Кого будем перекрашивать, и в какие цвета:

const className = 'some-link';
const colors = {
  En:   'red',
  Ru: 'green',
  De:  'blue',
};

Перекрашиваем текст в случае точного совпадения:

for (const n of document.getElementsByClassName(className)) {
  n.style.setProperty('color', colors[n.textContent]);
}

Или, смотрим наличие подстроки, регистр не важен:

document.querySelectorAll(`.${className}`).forEach(function(n) {
  n.style.color = this.find(m => m[0].test(n.innerText))?.[1];
}, Object.entries(colors).map(n => [ RegExp(n[0], 'i'), n[1] ]));

Можно и без регулярных выражений:

- RegExp(n[0], 'i')
+ n[0].toLowerCase()

- m[0].test(n.innerText)
+ n.innerText.toLowerCase().includes(m[0])

Используйте стек.

Например, в стек помещаем комплекты из трёх значений - под каким именем, что и куда копируем. Крутим цикл, пока стек не окажется пуст. Если копируемое значение является примитивным, то просто записываем его в копию, и уходим на следующую итерацию. Если же перед нами объект, то закидываем в копию пустой объект; этим же свежесозданным пустым объектом дополняем пары ключ-значение исходного объекта, и кладём это всё в стек.

function clone(value) {
  const clone = [];

  for (const stack = [ [ 0, value, clone ] ]; stack.length;) {
    const [ k, v, target ] = stack.pop();
    const isObj = v instanceof Object;
    target[k] = isObj ? v.constructor() : v;
    if (isObj) {
      stack.push(...Object.entries(v).map(n => [ ...n, target[k] ]).reverse());
    }
  }

  return clone[0];
}

Или, если в копируемом объекте могут быть циклические ссылки или какой-то из вложенных объектов встречается несколько раз и так же должно быть и в копии, то надо запоминать встреченные объекты, чтобы не обрабатывать их повторно - воспользуемся Map'ом, где ключами будут оригинальные объекты, а значениями их копии.

Как выглядит получение копии объекта: проверяем, встречался ли указанный объект ранее, если нет - создаём новый объект, сохраняем его в Map, а также кладём его вместе с оригиналом в стек, для последующей обработки; достаём из Map'а копию.

Крутим цикл, пока стек не пуст, на каждой итерации достаём из стека объект и его копию, перебираем свойства оригинала, записываем в копию копии значений.

function clone(value) {
  const stack = [];
  const clones = new Map;
  const getClone = v => v instanceof Object
    ? (clones.has(v) || stack.push([ v, clones.set(v, v.constructor()).get(v) ]),
       clones.get(v))
    : v;

  for (getClone(value); stack.length;) {
    const [ source, target ] = stack.pop();
    for (const k in source) if (Object.hasOwn(source, k)) {
      target[k] = getClone(source[k]);
    }
  }

  return getClone(value);
}

как правильнее всего будет это сделать?

Перестать заниматься ерундой и начать использовать готовые решения - structuredClone или cloneDeep, например.

options: {
  scales: {
    y: {
      ticks: {
        callback: (value, index, values) =>
          index > 0 && index < values.length - 1
            ? ''
            : Math[index ? 'max' : 'min'](...values.map(n => n.value)),
        ...

watch: {
  переменная: {
    immediate: true,
    handler(val) {
      document.body.classList.toggle('класс', val);
    },
  },
},

нужно создать 6 блоков с разными цветами

:style="{ color: bgColor }"

Цветами ЧЕГО? Свойство color - это цвет текста, никакого текстового содержимого в блоках нет.

Делаю как в документации

v-for="(index, bgColor) in colorArray"

Ну конечно, как в документации. Там ведь тоже элемент массива и его индекс местами перепутаны. Или всё-таки нет?