Vue.js nested for loop input field model binding
<p>In this example I am allowing the user to create their own typed list of sections. Each type has it's own form fields. The form fields render properly however, if I enter data into one of the fields after I've created two duplicate sections, both inputs are updated with the typed in text. This is not the intended result. </p>

<p>Instead each section should update its form field data content individually and it should reflect back to the value stored within the data.section related to it.</p>

<p>What am I missing?</p>

<p>Laravel View</p>

<pre><code>{{Form::open(['route' =&gt; 'api.post.store', 'class' =&gt; 'form-horizontal'])}}
    &lt;fieldset&gt;
        &lt;div id="legend"&gt;
            &lt;legend class=""&gt;Register&lt;/legend&gt;
        &lt;/div&gt;
        &lt;div :key="section.id" v-for="(index,section) in sections" class="control-group form-group-lg"&gt;
            &lt;div class="form-header"&gt;
                &lt;h3&gt;@{{ section.label }}&lt;/h3&gt;
            &lt;/div&gt;
            &lt;pre&gt;@{{ section | json }}&lt;/pre&gt;
            &lt;div v-for="field in section.fields" :key="field.id"&gt;

                &lt;div class="text-field" v-show="field.inputType == 'text'"&gt;
                    &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                    &lt;div class="controls"&gt;
                            &lt;input v-model="field.data.content" class="input-xlarge form-control"&gt;
                        &lt;p  class="help-block"&gt;@{{ field.helpText }}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="text-area-field" v-show="field.inputType == 'text-area'"&gt;
                    &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                    &lt;div class="controls"&gt;
                        &lt;textarea :v-bind="field.data.content" class="input xlarge form-control"  :placeholder="field.placeholder"&gt;
                            @{{ field.data.content }}
                        &lt;/textarea&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="text-area-field" v-show="field.inputType == 'data-map'"&gt;
                    &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                    &lt;div class="controls"&gt;
                        &lt;textarea :v-bind="field.data.content" class="input xlarge form-control" :placeholder="field.placeholder"&gt;
                            @{{ field.data.content }}
                        &lt;/textarea&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="control-group"&gt;
           &lt;div class="controls"&gt;
               &lt;div class="dropdown"&gt;
                   &lt;a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                   &lt;ul class="dropdown-menu"&gt;
                       &lt;li v-for="sectionType in sectionTypes"&gt;
                           &lt;a @click="setSectionCreateType(sectionType)" href="#"&gt;@{{ sectionType.label }}&lt;/a&gt;
                       &lt;/li&gt;
                   &lt;/ul&gt;
               &lt;/div&gt;
           &lt;/div&gt;
            &lt;div class="controls"&gt;
                &lt;div @click="addSection()" class="btn bdn-success"  class="btn btn-success"&gt;Add Section&lt;/div&gt;
            &lt;div @click="savePost()" class="btn bdn-success"  class="btn btn-success"&gt;Save&lt;/div&gt;

        &lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
{{Form::close()}}
</code></pre>

<p></p>

<p>Vuefile
    
    
        
    
</p>

<pre><code>&lt;script type="text/javascript"&gt;
    import Vue from 'vue';
    import FormField from './create/FormField.vue';
    export default {
        components: {
            FormField,
        },
        ready: function () {

        },
        filters: {},
        data(){
            return {
                messages: [],
                sections: [],
                saveSections: [],
                sectionCreateType: false,
                sectionTypes: [
                    {
                        label: 'Company',
                        map: 'company',
                        fields: [
                            {
                                label: 'name',
                                name: 'name',
                                inputType: 'text',
                                placeholder: 'Company Name',
                                data: {
                                    content: '',
                                },
                            },
                            {
                                label: 'symbol',
                                name: 'symbol',
                                inputType: 'text',
                                placeholder: 'stock symbol',
                                data: {
                                    content: '',
                                },
                            }
                        ]

                    },
                    {
                        label: 'Link',
                        map: 'link',
                        inputType: 'text',
                        data: {},
                        fields: [
                            {
                                label: 'url',
                                name: 'url',
                                inputType: 'text',
                                placeholder: 'Url',
                                data: {
                                    content: '',
                                },
                            },
                        ]

                    },
                    {
                        label: 'Paragraph',
                        map: 'paragraph',
                        data: {},
                        fields: [
                            {
                                label: 'content',
                                name: 'content',
                                inputType: 'text-area',
                                placeholder: 'Content',
                                data: {
                                    content: '',
                                },
                            },
                        ]
                    },

                    {
                        label: 'Person',
                        map: 'person',
                        data: {},
                        inputType: 'data-map',

                        'fields': [
                            {
                                label: 'first_name',
                                name: 'name',
                                placeholder: 'Person Name',
                                data: {
                                    content: '',
                                },
                            },
                            {
                                label: 'last_name',
                                name: 'name',
                                placeholder: 'Person Name',
                                data: {
                                    content: '',
                                },
                            }
                        ]

                    },
                ],


            }


        },
        directives: {},
        events: {},
        methods: {
            setSectionCreateType(type)
            {
                console.log('setting sectionCreateType: ' + type.label)

                this.sectionCreateType = type;
            },
            addSection()
            {
                if (!this.sectionCreateType) {
                    this.sectionCreateType = this.sectionTypes[0];

                }
                this.createSection(this.sectionCreateType);
            },
            createSection(type)
            {
                this.sections.push(Vue.util.extend({}, type))

            },
            previewPost(){
            },
            savePost: function(){
                var view = this;
                var saveObject = [];
                var sectionObject = [];


                this.sections.forEach(function (section) {



                    if(!sectionObject[section.type.map])
                    {
                    sectionObject[section.type.map] = [];
                    }

                    for (var key in section.type.fields) {
                        var field = section.type.fields[key];
                        var saveKey = [];
                        saveKey[field.name] = field.data.content;
                    }
                    sectionObject[section.type.map].push(saveKey);

                });
                saveObject.push(sectionObject);
                console.log(saveObject);

            },
        }


    }

&lt;/script&gt;
</code></pre>