Dynamically using v-model to display results of a v-for loop and edit it

I have a an array that I'm looping over with v-for, I don't know the number of items in this array, it's gonna be different every time, so I managed to reach a point where I can enter the values into the input and have them reflected correctly in the data property I set for them,

Now I need to resolve two things: -First, after I click edit as you'll see in the code, the current value doesn't appear in the input that has a v-model, it's working one-way only.

-Secondly, I need to be able to submit the new data to the server through axios or ajax, what I don't know is how to assign these new values to variables that I can submit, since I have no idea how many values I'm gonna have each time.

Here's the code for the component:

 <template>
    <div class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Options</th>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Student Id</th>
                    <th v-for="quiz in quizzes">
                        {{ quiz.quiz_name }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(student, index) in students">
                    <td v-if="!editing || !currentStudent(student)">
                        <button class="btn btn-primary" @click="edit(student, index)" :disabled="editing == true">
                            Edit
                        </button>
                    </td>
                    <td v-if="editing && currentStudent(student)">
                        <button class="btn btn-primary btn-xs">Update</button>
                        <a @click="cancelEdit">
                            Cancel
                        </a>
                    </td>
                    <td>
                        {{ index }}
                    </td>
                    <td>
                        {{ student.full_name }}
                    </td>
                    <td>
                        {{ student.email }}
                    </td>
                    <td>
                        {{ student.secret_id.secret_id }}
                    </td>
                    <td v-for="quiz in student.quizzes" v-if="!editing || !currentStudent(student)">
                        {{ quiz.pivot.score }}
                    </td>
                    <td v-for="(quiz, index) in student.quizzes" v-if="editing && currentStudent(student)">
                        <input v-model="quiz_scores[index]">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 </template>

<script>
    export default {
        props: ['students', 'quizzes'],
        data: function () {
            return {
                editing: false,
                editing_user: '',
                index: '',
                quiz_scores: []
            };
        },
        mounted() {
            //
        },
        methods: {
            edit(student, index) {
                this.editing_user = student,
                this.index = index,
                this.editing = true
            },
            cancelEdit() {
                this.editing_user = '',
                this.index = '',
                this.quiz_scores = [],
                this.editing = false
            },
            currentStudent(student) {
                return this.editing_user == student
            }
        },
    }
</script>

Of course this is incomplete code, if you have any hints or tips on what I should do, I'd be very appreciative, thanks in advance.