Структурирование большой формы с компонентами на Vue и Vuex

Question

Я уже давно пытаюсь это выяснить, позвольте мне объяснить.

У меня большая форма с 20 полями ввода. Одна из особенностей этой формы заключается в том, что вы можете добавлять дополнительные поля, нажимая некоторые кнопки.

Следующий фрагмент кода имеет поле ввода и две кнопки: одну для добавления нового ввода и одну для удаления текущего поля ввода.

 <div class="input-group">
    <span class="input-group-addon"> {{index}} </span>
    <input type="text" class="form-control" v-model="text">
    <span class="input-group-btn">
      <button class="btn btn-success" title="New Step" v-on:click="addStep">
        <i class="fa fa-plus"></i>
      </button>
    </span>
    <span class="input-group-btn">
      <button class="btn btn-success" title="Remove Step" 
      v-on:click="removeStep">
        <i class="fa fa-remove"></i>
      </button>
    </span>
  </div>

Действия addStep / removeStep определены внутри компонента Vue.

Существуют похожие группы полей, в которых при нажатии кнопки «Добавить» добавляются 2 поля вместо одного.

Я пытаюсь найти хороший чистый подход для этого, это мои текущие идеи:

1. Используйте компонент для хранения всей формы. Состояние формы хранится в хранилище Vuex, и я могу использовать геттеры и мутации для управления состоянием. Этот подход прост, но плохо масштабируется. Форма большая, и есть некоторый дублирующий код (например, функции добавления / удаления для каждого типа поля, которому это нужно *

2. Используйте родительский компонент, единственной целью которого является связь с хранилищем (обработка общей логики) и наличие дочернего компонента, который получает все данные в качестве реквизита. Целью этого дочернего компонента является только рендеринг данных. Я не уверен, что это хорошая идея. Нам нужны кнопки для выдачи событий для добавления новых входов. Таким образом, преимущества использования магазина теперь исчезли.

3. Имейте компонент формы, который содержит дочерние компоненты, которые содержат все группы полей, которые могут увеличиваться или уменьшаться. Идея выглядит хорошо, но теперь логика разбросана по разным компонентам. Хорошая часть заключается в том, что каждый компонент имеет доступ к хранилищу, поэтому родительский компонент не знает, когда растут дочерние компоненты.

4. То же, что 3, но не использовать магазин и использовать события. Есть ли все состояние внутри родительского компонента?

Я знаю, трудно найти "идеальное" решение, но вот основные вопросы:

Какие весы лучше? Что чище? Какая лучшая практика?

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