Nested field array

Nested field array refreshes with incorrect data

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://rawgit.com/logaretm/vee-validate/master/dist/vee-validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app">
    <band></band>
</div>

CSS

.margin-bottom-md {
  margin-bottom: 10px;
}

.margin-top-md {
  margin-top: 10px;
}

.margin-top-lg {
  margin-top: 30px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
}

JavaScript

console.clear()

Vue.use(VeeValidate, {
    inject: false
});


Vue.component('InputField', {
    template: `
        <div class="form-group"
             :class="{'input': true, 'has-error': errors.has(name) }">

            <label class="control-label"
                   :for="fieldId">

                {{ getLabel }}
            </label>


            <input class="form-control"
                   :id="fieldId"
                    ref="input"
                   :name="name"
                   :maxlength="maxlength"
                   :placeholder="getPlaceholder"
                   :required="getRequired"
                   :title="getLabel"
                   :type="type"
                   @input="updateValue($event.target.value)"
                   v-validate="validation"
                   data-vv-validate-on="input"
                   :data-vv-name="name">


            <span v-show="errors.has(name)"
                  class="help field-error">

                {{ errors.first(name) }}
            </span>

        </div>
    `,

    props: {
        label: String,
        name: String,
        placeholder: String,
        type: {
            type: String,
            default: "text",
        },
        maxlength: {
            type: Number,
            default: 256,
        },
        value: String,
        validation: String
    },

    inject: [
        '$validator'
    ],

    computed: {
        fieldId () {
            return `id_${this.name}`
        },

        getLabel () {
            if (this.label) {
                return this.label
            }

            return this.toTitleCase(this.name)
        },

        getPlaceholder () {
            if (this.placeholder) {
                return this.placeholder
            }

            if (this.label) {
                return this.label
            }

            return this.toTitleCase(this.name)
        },

        getRequired () {
            return this.validation.includes("required")
      ...