0xD34F

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

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

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

Сделайте свои "аргументы" функциями, которые будут использоваться в качестве значений параметров метода 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);
  },
},

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.

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

Зачем отдельный массив 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');

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

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

:style="{ color: bgColor }"

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

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

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

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

computed: {
  component() {
    /*
     * здесь возвращаете имя компонента, в зависимости от... это вам виднее;
     * если действительно будет так, как показано в вопросе - натуральные числа
     * соответствуют компонентам, то можно сложить имена компонентов в массив:
     * return [ 'component-1', 'component-2', 'component-3' ][this.x - 1];
     */
  },
},

<component :is="component" />

computed: {
  linesCount() {
    return 1 + (this.text.match(/\n/g)?.length ?? 0);
  },
},

<div>{{ linesCount }}</div>

Можно. Если значение этого computed является функцией. Но если вам туда надо передавать параметр, то, наверное, это должен быть метод, а не computed.

computed: {
  categories() {
    return this.posts.data.reduce((acc, n) => (
      (acc[n.category_name] ??= {
        name: n.category_name,
        posts: [],
      }).posts.push(...n.posts),
      acc
    ), {});
  },
  ...

<div v-for="category in categories">
  <h3>{{ category.name }}</h3>
  <div v-for="post in category.posts">
    {{ post.title }}
  </div>
</div>

ref указанный так указывает на Proxy а не на элемент. Как это исправить?

Никак не исправить.

Да это и не нужно. За этим Proxy скрывается ссылка на экземпляр компонента, а у экземпляра компонента в качестве одного из свойств присутствует ссылка на элемент.

data: () => ({
  blockTypes: [ 'block-item1', 'block-item2' ],
  blocks: [],
}),

<button v-for="n in blockTypes" @click="blocks.push(n)">add {{ n }}</button>
<component v-for="n in blocks" :is="n"></component>

return this.arr.sort(...

Что делает метод sort:

Метод sort() на месте сортирует элементы массива

копия массива не создаётся

То есть, выполнили сортировку - потеряли исходное состояние массива.

Делайте внутри вычисляемого свойства копию массива, и сортируйте её. А когда нужны данные в неотсортированном виде, ничего не делайте, просто возвращайте массив, как он есть.

methods: {
  trClass: rowData => rowData.is_blocked && 'table-danger',
  ...

<b-table
  :tbody-tr-class="trClass"
  ...

setup() {
  ...
  const boards = computed(() => {
    return store.getters["boards/getBoards"];
  });

  return boards;
},

А если бы у вас было два вычисляемых свойства, что бы вы возвращали из setup? Вообще, что следует возвращать из setup? Откройте документацию и разберитесь.

все сделал по гайду

Это по какому? Ничего, что документацию вы смотрите к четвёртой версии роутера, в то время как используете третью?

data: () => ({
  numArticlesToShow: 5,
  ...
}),
computed: {
  articlesToShow() {
    return this.articles.slice(0, this.numArticlesToShow);
  },
  ...
},

<li v-for="n in articlesToShow">
  ...
</li>
...
<button @click="numArticlesToShow += 5" :disabled="numArticlesToShow >= articles.length">
  показать ещё
</button>