Дочерний объект объекта данных не оценивается, пока не будет зарегистрирован. Vue.js

Я пишу компонент (form), который действует как контейнер для полей формы, которые передаются из родительского компонента.

Я передаю поля формы дочернему элементу в качестве опоры:

formFields: [
    { name: 'email', type: 'email' },
    {
        name: 'sub_group',
        type: 'group',
        contents: [
            { name: 'sub_field_01', type: 'text' },
            { name: 'sub_field_02', type: 'text' },
        ]
    }
]

Все это отображается нормально и хорошо работает в моем дочернем компоненте.

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

Однако массив sub_group всегда пустой пока я не запишу это в консоль, поэтому он оценивается только при регистрации. Всегда отображается верхний уровень (в данном случае email).

Я попытался избавиться от вычисляемого свойства и использовать метод для создания объекта для публикации, но у меня та же проблема. Я действительно понятия не имею, что происходит. Как «заставить» вычисленное свойство оценивать?

ИЗМЕНИТЬ Пример добавления формы

Код, отображающий форму:

<div v-for = "field in formFields">
    <!-- Individual Field -->
    <div v-if = "field.type !== 'group'">
        <label v-if = "field.label">{{ field.label }}</label>
        <input :type = "field.type" :name = "field.name" v-model = "field.value">   
    </div>
    <!-- Group -->
    <div v-else>
        <div v-for = "child in field.group">
            <label v-if = "child.label">{{ child.label }}</label>
            <input :type = "child.type" :name = "child.name" v-model = "child.value">   
        </div>
    </div>
</div>

Вычисляемое свойство для публикации:

<div v-for = "field in formFields">
    <!-- Individual Field -->
    <div v-if = "field.type !== 'group'">
        <label v-if = "field.label">{{ field.label }}</label>
        <input :type = "field.type" :name = "field.name" v-model = "field.value">   
    </div>
    <!-- Group -->
    <div v-else>
        <div v-for = "child in field.group">
            <label v-if = "child.label">{{ child.label }}</label>
            <input :type = "child.type" :name = "child.name" v-model = "child.value">   
        </div>
    </div>
</div>

Я понимаю, что это требует рефакторинга, но я не могу заставить его работать так. Я попытался добавить cache:false и геттер к вычисляемому свойству, но это не сработало.