0xD34F

<input v-model.number="val">

watch: {
  val(val) {
    this.val = Math.max(1, val);
  },
},

method: mapActions(['fetchPosts']),

methods

Вот же позорище.

1. Не ок.

Во-первых - модифицируете данные компонента внутри вычисляемого свойства.
Во-вторых - а что если количество свойств товара увеличится? Опять будете копипастить?

Исправляем:

phonesProcessed() {
  const classes = Object.fromEntries(this.classes.map(({ classinfoName: c, items }) => [
    c,
    Object.fromEntries(items.map(n => [
      n[`id${c[0].toUpperCase()}${c.slice(1)}`],
      n.name,
    ])),
  ]));

  return this.phones.map(n =>
    Object.fromEntries(Object.entries(n).map(([ k, v ]) => [
      k,
      classes.hasOwnProperty(k) ? classes[k][v] : v,
    ]))
  );
},

2. Чтобы объединить - это надо на бэкенде вопрос решать. На клиенте... Ну, можно избавиться от копипасты:

created() {
  [
    [ '5ad979f4-7393-11ea-b9b1-d7fe1923484d', 'classinfo', 'classes' ],
    [ '46bf408d-739d-11ea-b9b1-5301e3b2b9ba', 'phones', 'phones' ],
  ].forEach(([ key, apiPropName, componentPropName ]) => {
    axios
      .get(`https://jsonblob.com/api/${key}`)
      .then(({ data: { [apiPropName]: d } }) => this[componentPropName] = d)
      .catch(e => this.errors.push(e));
  });
},

Слоты. Так. Или так.

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

Если знаете заранее, как всё должно выглядеть, тогда можно сделать так, например:

computed: {
  groupedItems() {
    const { items } = this;
    const statuses = [...new Set(items.map(n => n.status))];
    const positions = [...new Set(items.map(n => n.position))];

    return items.reduce(
      (acc, n) => (acc[n.status][n.position].push(n), acc),
      Object.fromEntries(statuses.map(status => [
        status,
        Object.fromEntries(positions.map(position => [
          position,
          []
        ]))
      ]))
    );
  },
},

<ul>
  <li v-for="(statusGroup, status) in groupedItems">
    <h2>{{ status }}</h2>
    <ul>
      <li v-for="(positionGroup, position) in statusGroup">
        <h3>{{ position }}</h3>
        <ul>
          <li v-for="n in positionGroup">{{ n.name }}</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

В более общем случае для отображения данных понадобится рекурсивный компонент:

name: 'v-tree',
props: [ 'items' ],

<ul v-if="items instanceof Object">
  <li v-for="n in items">
    <b>{{ n.name }}</b>
    <v-tree :items="n.children" />
  </li>
</ul>

И функция группировки массива по произвольному количеству свойств:

const group = (arr, keys) =>
  arr.reduce((acc, n) => {
    keys.reduce((g, k, i, a) => {
      const name = n[k];
      return (g[name] = g[name] || {
        name,
        children: i === a.length - 1 ? [] : {},
      }).children;
    }, acc).push(n);

    return acc;
  }, keys.length ? {} : []);

Использоваться оно будет как-то так:

computed: {
  groupedItems() {
    return group(this.items, [ 'status', 'position' ]);
  },
},

<v-tree :items="groupedItems" />

Через render-функцию разруливайте такие ситуации.

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

Повесить обработчики событий mouseenter/mouseleave, менять в них данные, от которых зависит состояние элементов. Например.

<input @cut.prevent @copy.prevent @paste.prevent>

nextTick + вызов дополнительного reflow путём обращения к одному из свойств анимируемого элемента.

Или назначайте анимируемому элементу key, и изменяйте его когда анимацию надо перезапустить (свойство isAnim в этом случае не нужно).

Или делайте анимацию бесконечной, и чтобы длительность совпадала с интервалом, по которому уменьшаете number. Класс с анимацией назначается в случае, если number ещё есть куда уменьшать.

Документации есть что сказать по этому поводу.

Можно попробовать прислушаться:

data: () => ({
  links: [
    { to: '...', title: '...' },
    { to: '...', title: '...' },
    ...
  ],
}),

<ul>
  <router-link v-for="n in links" :to="n.to" v-slot="s">
    <li :class="{ active: s.isExactActive }">
      <a :href="s.href" @click="s.navigate">{{ n.title }}</a>
    </li>
  </router-link>
</ul>

this.nextTick

Да ну?

Какой find, вы чего? Был массив, и остаться должен массив. Используйте map:

.map(n => ({ ...n, actv: false }))

или

.map(n => (n.actv = false, n))

или после монтирования компонента?

Лучше бы конечно так не делать, но если вдруг...

Чтобы реактивность заработала, надо будет или использовать $set:

mounted() {
  this.postsData.forEach(n => this.$set(n, 'actv', false));
},

или создать новый массив:

mounted() {
  this.postsData = this.postsData.map(n => ({ ...n, actv: false }));
},

https://jsfiddle.net/ujxdzas7/

Здесь нужна не фильтрация, а группировка.

В элементы board добавьте свойство, значения которого будут повторять значения свойства category у элементов массива tasks. Типа имя категории, обозвать можно name.

computed: {
  tasksGroupedByCategory() {
    return this.tasks.reduce(
      (acc, n) => (acc[n.category].push(n), acc),
      Object.fromEntries(this.boards.map(n => [ n.name, [] ]))
    );
  },
},

<div v-for="b in boards">
  <h2>{{ b.title }}</h2>
  <div v-for="n in tasksGroupedByCategory[b.name]">
    {{ n.title }}
  </div>
</div>

https://jsfiddle.net/p6k8m527/1/

Сохраняйте заказы в объект пользователя:

<button @click="getOrders(user)">Orders</button>
<div v-for="order in user.orders">

async getOrders(user) {
  this.$set(user, 'orders', await fetch ...);
}

@click="testClickGo().restart"

То есть, попробовать вызвать метод вы не догадались. Это печально.

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

targets: '.testVal',

Так не надо, используйте ref.

data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
},

<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>

Очевидно, у каждого объекта с контентом должно быть собственное свойство, которое будет указывать на наличие лайка. Для отображения лайка неплохо бы сделать отдельный компонент. Можно даже с поддержкой v-model.

https://jsfiddle.net/0y6pjgc4/

делаю все как показано в примере в оф. репозитории

Пример не смотрел, но сильно сомневаюсь в правдивости вашего утверждения.

В документации:

API: Container

Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

"Should be" - "должен быть". Должен. То есть, это не рекомендация, а прямое указание. Которое вы проигнорировали:

<Container @drop="$emit('drop', row.id)" :get-child-payload="getChildPayload">
  <div class="row">

Во-первых.

Vue.Draggable