0xD34F

Вместо :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;
  },
},

const extend = (target, source) => Object
  .entries(source instanceof Object ? source : {})
  .reduce((acc, [ k, v ]) => {
    acc[k] = v instanceof Object ? extend(acc[k], v) : k in acc ? acc[k] : v;
    return acc;
  }, target instanceof Object ? target : {});


extend(patient, donor);

Вешаете обработчик клика на 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 и достаёте из него нужные данные.

Вы добавляете элементы в начало массива, а новый id вычисляете на основе последнего элемента. Очевидно же - сколько бы элементов вы ни добавили таким образом, id последнего не изменится, а значит и новые id будут одинаковыми. На вашем месте, вместо того, чтобы плясать от какого-то конкретного элемента, я бы искал максимальный id:

const id = Math.max(0, ...this.collection.map(n => n.id)) + 1;

Объявление свойства birthDay, тип и значение - должно быть Date вместо Data. И и при использовании пайпа аналогично - должно быть date вместо data. И формат даты - это же строка, где кавычки? Исправляем:

birthDay: Date = new Date();

{{ birthDay | date : 'dd-MM-yyyy' }}

const onInput = () => $button.prop('disabled', !$inputs.get().every(n => $(n).val()));
const $button = $('селектор кнопки');
const $inputs = $('селектор инпутов').on('input', onInput);
onInput();

или

const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.some(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();

$('#name').on('input', function() {
  $('.cell').text(i => this.value[i] || '');
});

или

document.querySelector('#name').addEventListener('input', e => {
  document.querySelectorAll('.cell').forEach((n, i) => {
    n.textContent = e.target.value[i] || '';
  });
});

arr.map(n => ({
  id: n.id.value,
  title: n.title.value,
  slug: n.slug.value
}))

или

arr.map(n => Object.entries(n).reduce((acc, [ k, v ]) => (acc[k] = v.value, acc), {}))

или

arr.map(n => Object.keys(n).reduce((acc, k) => ({ ...acc, [k]: n[k].value }), {}))

или

arr.map(n => Object.assign({}, ...Object.values(n).map(m => ({ [m.title.toLowerCase()]: m.value }))))

href должен быть разным

Определяем класс, который будет сдвигать .wrap:

.wrap-active {
  transform: translateY(-100%);
}

Переключаем этот класс при кликах по ссылкам:

$('.wrap').on('click', 'a', function(e) {
  e.preventDefault();
  $(e.delegateTarget).toggleClass('wrap-active');
});

https://jsfiddle.net/uvoqfn82/

Или, без js.

Перед .wrap добавляем скрытый чекбокс:

<input type="checkbox" id="toggle" hidden>

Ссылки заменяем на label'ы, переключающие чекбокс:

<a href="#">Day</a> ---> <label for="toggle">Day</label>

<a href="#">Night</a> ---> <label for="toggle">Night</label>

Сдвигаем .wrap не при наличии дополнительного класса, а если чекбокс перед ним выставлен:

.wrap-active { ---> #toggle:checked + .wrap {

https://jsfiddle.net/uvoqfn82/1/

замените

$("td.price").text()

на

$(this).closest('tr').find('td.price').text()

const links = [
  'https://youtu.be/fi5LDM9ppuc',
  'https://www.youtube.com/embed/fi5LDM9ppuc',
];

const newLinks = links.map(n => `https://www.youtube.com/watch?v=${n.split('/').pop()}`);

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

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>

interface DataI {
  items: { [key: string]: ItemI }
}

Подробнее - index signature.

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

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)"
  ...

Потому что к этим слайдам не привязано никаких обработчиков. А не привязано потому, что это копии слайдов - slick делает копии для создания иллюзии круговой прокрутки.

const date = new Date();
date.setMonth(date.getMonth() + 1);
date.setDate(0);

$('#datepicker').datepicker({
  maxDate: date,
});

Почему удаление элемента осуществляется в дочернем компоненте, который ни про какую collection знать не знает? Почему в родительском компоненте в качестве обработчика события указывается несуществующий метод?

Наверное, метод removePost из дочернего компонента надо разделить на два: removePost в дочернем компоненте эмитит id элемента, а removePost в родительском компоненте по этому id осуществляет удаление элемента из массива. Т.е., в дочернем:

removePost(picId: number) {
  this.remove.emit(picId);
}

В родительском:

removePost(picId: number) {
  this.collection = this.collection.filter(p => p.id !== picId);
}