Q:

Storing edited form fields for submittal with Vue

Objective: I have a form interface that is being loaded with an object's current data for editing. The user opens this modal with the form that is loaded with the current info so they an either edit it or leave it
Currently working: The form loads with the data from my three objects (details, editSubEvents, instructions) and shows properly without issue
My problem: When I edit the fields and hit submit, I'm only currently dumping the submitted data object to make sure I have what I need. I get the eventID fine becasue it won't change and I get it from the original object. However, I need to store the new title, instruction, and subEvents (as an array) in order to submit them because they're obviously different from the origin ones 
How can I properly store the new info from these input fields, including storing the new subEvent title and instructions as an array?
    <div class="modal-body">
    <div class="form-group row" v-for="detail in details">
        <p class="modal-title">Title</p>
        <input v-model="detail.title" type="text" class="form-control" id="EventTitle" name="EventTitle">
    </div>

    <div class="form-group row" v-for="subEvent in editSubEvents">
        <p class="modal-title">SubEvent Title</p>
        <input v-model="subEvent.title" type="text" class="form-control" id="newSubTitle" name="newSubTitle">
        <p class="modal-title">SubEvent Instructions</p>
        <textarea v-model="subEvent.instructions" type="text" class="form-control" id="newSubInstructions" name="newSubInstructions"></textarea>
    </div>
</div>

data() {
    return {
        details: [],
        instructions:[],
        editSubEvents:[],
    }
},
methods: {
    updateEvent() {
        let data = {
            EventID: this.details[0].event_id,
            title: 
            origin:
            instructions: 
            subEvents: //needs to be an array 

        };
        console.dir(data);

    }
}

A:

All of the properties of your data object can be bound to the UI elements (and most of them are, going by your template example code). The properties of the data object are accessible through the Vue component's this.
new Vue({
    el: '#vueApp',
    data() {
        return {
            details: [],
            instructions:[],
            editSubEvents:[],
        }
    },
    methods: {
        updateEvent() {
            const data = {
                EventID: this.details[0].event_id,
                title: this.details[0].title,
                origin: this.details[0].origin,
                instructions: this.instructions,
                subEvents: this.subEvents,
            };
            console.dir(data);
        }
    }
}

