0xD34F

Подскажите, пожалуйста, как сделать для других блоков чтобы работало тоже?

Указывайте в el родительский элемент этих блоков.

А ещё не вижу, чтобы у вас было определено свойство isActive. Почему в шаблоне оно используется, а в data его нет?

Данные с инпутов нужно хранить в одном объекте entity.

Поскольку вы подобную необходимость никак не мотивировали - не нужно. Данные следует хранить там, где с ними проще работать - это элементы массива addableFormData, на основе которого вы создаёте формы. Если создавать формы на основе одного свойства, а данные для них хранить в другом - придётся их как-то синхронизировать, вручную. Ну уж нет, лучше сделать entity computed свойством.

Попыталась это реализовать тут

А что, вы и в самом деле используете vue первой версии? И что делают div'ы внутри ul? И этот чёртов entity: вы утверждали, что он должен быть один на всех - почему же он является свойством компонента, представляющего элемент формы? Вопросы-вопросы-вопросы... Риторические, да.

с помощью генерирования рандомного имени сво-ва

Зааачееееееем??! У вас же уже есть уникальный id формы - почему было не использовать его?

Похоже на то, к чему вы стремились?

UPD. Если выбросить массив addableFormData, тогда да - проще будет так, как вы изначально хотели, держать данные в объекте. Типа так.

Например.

Одного только не могу понять - ЗАЧЕМ? Почему бы не сделать наоборот? - работать сразу с объектом, а json, если он так необходим, пусть будет вычисляемым свойством.

Делаете метод фильтрации опций, который в качестве аргумента принимает индекс текущего селекта:

filterItems(index) {
  return this.items.filter(n => [ -1, index ].includes(this.selected.indexOf(n)));
}

И передаёте в v-for отфильтрованные опции. Типа так.

Метод onButton и свойство button не нужны - достаточно computed свойства showButton, типа так:

<button v-show="showButton">

computed: {
  showButton() {
    return this.username !== '' && this.password !== '';
  },
},

Работает, если в вместо this.$refs.form.submit() написать setTimeout(()=>this.$refs.form.submit(), 0) . Но как будет правильнее в этом случае.

nextTick

И почему вообще так происходит?

потому что

Вместо :model="MainForm" должно быть :model="MainForm.dynamicValidateForm".

А :rules="rules" замените на :rules="rules.value".

UPD. Вынесено из комментариев:

а могу я сослаться :model="MainForm" в главной форме, а в props передать dynamicValidateForm

Нет проблем:

:prop="`dynamicValidateForm.domains.${index}.value`"

Два свойства - вводимое пользователем значение и состояние (активность ввода). В зависимости от состояния отображается input или span (v-if / v-else). Как-то так:

<input v-if="input" v-model="name" @keypress.enter="onEnter">
<span v-else v-text="name" @click="onClick"></span>

data: () => ({
  name: '',
  input: true,
}),
methods: {
  onEnter() {
    if (this.name) {
      this.input = false;
    }
  },
  onClick() {
    this.input = true;
  },
},

Вешаете обработчик клика на smth-tag, передаёте в него id выбранного элемента, и группу к которой элемент принадлежит, устанавливаете selectedTagId. Всё.

UPD. Вынесено из комментариев:

А как это сделать из компонента, а не из корневого экземпляра VUE?

Никак, это абсурд. То есть, можно конечно из дочернего компонента постучаться в $root / $parent и что-то там поменять, но делать такого НЕ НАДО. Данные лежат в корневом компоненте - вот там их и меняйте.

Или вы имели в виду отправку события из дочернего компонента? Пробросить событие через smth-group не выйдет, т.к. слотам нельзя назначать обработчики событий. Остаётся вариант с шиной событий (ну и vuex ещё), но в общем случае - сделать всё равно не получится, так как smth-tag не знает к какой группе принадлежат его данные (однако, если гарантируется, что id уникальны не только в пределах группы, а вообще - тогда можно, например так).

Наверное нужно создать массив, куда помещать id продукта и данные с инпутов...

Не нужно. Указывайте в v-model соответствующие свойства объекта product:

<input v-model="product.count" name="count" type="text" placeholder="Количество">
<input v-model="product.comment" name="comment" type="text" placeholder="Примечание">

А вот непосредственно перед выполнением запроса - да, можно и отдельный массив сделать, обходите products и достаёте из него нужные данные.

Можно сделать метод, который преобразует объект так, чтобы вложенности не было:

methods: {
  plainObj(obj) {
    return Object.entries(obj).reduce((acc, [ k, v ]) => {
      if (v instanceof Object) {
        Object.assign(acc, this.plainObj(v));
      } else {
        acc[k] = v;
      }
      return acc;
    }, {});
  }
}

<li v-for="value in plainObj(object)" class="list-group-item">{{ value }}</li>

Или сделать рекурсивный компонент:

Vue.component('list-obj', {
  template: `
<ul class="list-group">
  <li v-for="value in obj" class="list-group-item">
    <list-obj v-if="value instanceof Object" :obj="value"></list-obj>
    <span v-else>{{ value }}</span>
  </li>
</ul>`,
  props: [ 'obj' ]
});

<list-obj :obj="object"></list-obj>

Добавить объектам, на основе которых создаются блоки, свойство, которое будет отвечать за наличие класса:

state: {
  items: [
    { title: '...', liked: false },
    { title: '...', liked: false },
    ...

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

mutations: {
  toggleLike: (state, item) => item.liked = !item.liked,
  ...

Назначать класс в зависимости от значения этого свойства, и вызывать мутацию по клику:

<li
  v-for="n in $store.state.items"
  :class="{ liked: n.liked }"
  @click="$store.commit('toggleLike', n)"
  ...

Косяк ровно тот же, что и в вашем предыдущем вопросе. Сделайте вместо индекса нормальный key - и всё станет хорошо. А сейчас что - элемент удалили, неважно какой, всегда изменяется key последнего элемента (вернее сказать, элемента с таким key вообще больше нет) - поэтому он и анимируется.

Потому что key кривой - завязан на индекс. Сделайте, чтобы он соответствовал реальным данным - всё будет OK.

Странному коду - странное поведение. Разбираться в причинах которого как-то не очень интересно. Ну не должен getCountrys быть вычисляемым свойством, не должен. Это метод, или, возможно, watcher. Переписывайте код.

RegExp('(?:^|\s)([' + arg + '][.]*)','gi');

Косяк - при использовании конструктора RegExp надо экранировать обратный слеш.
Непонятное - зачем флаг g, выделение первых букв в отдельную группу и точки, которых может вообще не быть? Вы же вроде фильтрацию делаете.

Исправляем: RegExp(`(?:^|\\s)[${arg}]`, 'i').

this.filter = expr;

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

Способ на мой взгляд довольно костыльный, но... массив, который вы обходите через v-for - добавить его элементам свойство height, и передавать сами элементы в Tween. Как-то так.

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

Вы вызываете done сразу после изменения show, поэтому элемент удаляется немедленно, не дожидаясь окончания анимации. Надо использовать коллбек onComplete:

leave(el, done) {
  TweenMax.to(el, 1, {
    x: 0,
    onComplete: done,
  });
},