Update fields inside v-for loop using vue.js - vue.js

Question

How can i update multiple fields inside the v-for loop using Vue.js,as i have fields which i iterate using v-for loop and want to update any field.
besides this i am able to delete and add new fields successfully.
Here what i am trying to do
Note:i can update fields with static values,but needs to update it with real values.
new Vue({
el: "#app",
data: {
users: [{
name: 'test',
phone: '1234'
}, ],
form: {
name: '',
phone: ''
},
show_link: true,
IsOn: false,
},
methods: {
addRow: function() {
this.IsOn = true
this.show_link = false
},
removeSelected(index) {
this.users.splice(index, 1);
},
saveForm() {
this.users.push({
name: this.form.name,
phone: this.form.phone
})
this.form.name = '';
this.form.phone = '';
},
updateForm(key) {
this.users[key].name = 'john doe', // should be the entered value
this.users[key].phone = '0000' // should be the entered value
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="(user,key) in users">
<label>
<input type="text" v-model="user.name">
<input type="text" v-model="user.phone">
<input type="button" value="Update" #click="updateForm(key)">
<input type="button" value="Delete" #click="removeSelected(key)">
</label>
</li>
</ol>
<a v-if="show_link" #click="addRow">Add Another</a>
<div v-if="IsOn">
<hr />
<input type="text" name="name" v-model="form.name">
<input type="text" name="name" v-model="form.phone">
<input type="button" value="Save" #click="saveForm">
</div>
</div>