vue.js - v-model overwrite input value in VueJS -

i have input

<input type="text" :value="user.firstname" v-model="userinfo.firstname"> 

that in component edit.vue.

in users.vue have router link

<router-link :to="'/users/edit-user/'+user.id"><a>edit</a></router-link> 

and when click takes me on edit component id of actual user on url.

the problem if put v-model="userinfo.firstname" in first input overwrites data bring edit it, name.

if delete v-model="userinfo.firstname" input can see actual value of input, comes database, mean actual name.

i need v-model, in edit page, take new input value , send database.

in normal edit, when click on edit button, suppose see actual data edit it, not empty input.

so why v-model overwrites user.name value(that comes json users, database) , can make see actual value , able send modified value input in database?

i recommend use vuex case. fatman said in answer v-model overrides value property.

this advise how should edit. write fast it's not perfect. learn vuex , make better.

user.vue

<p>{‌{user.firstname}}</p> <p>{‌{user.lastname}}</p> <router-link :to="'/users/edit-user/'+user.rid"><a >edit user</a></router-link> 

edituser.vue

<input  type="text" v-model="user.firstname"> <input  type="text" v-model="user.lastname">  computed: {       user() {           return clone(this.$store.state.currentuser);       }     },  methods: {       gettheuser() {           axios.get("/user/" + this.$route.params.id)             .then((response) => {               //this.user = response.data;               this.$store.commit('setcurrentuser', response.data);             })             .catch(function (res) {               this.$store.commit('clearcurrentuser');             });      },     updateuser() {         // check how token , replace down here         axios.put('/user/' + this.$route.params.id, this.user,             {'headers':{'x-auth-token':localstorage.token}},           {'headers':{'content-type': 'application/json'}})         .then((response) => {           this.$store.commit('setcurrentuser', this.user);          })         .catch((response) => {           console.log('error answer', response)          })       }    } 

store.js

import vue 'vue'; import vuex 'vuex'; vue.use(vuex); export default new vuex.store({   state: {     currentuser: {}   },   mutations: {     setcurrentuser: function (state, users) {       state.currentuser = users;     },     clearcurrentuser: function (state) {       state.currentuser = {};     },   } }) 

in main.js

    import store './store.js';      new vue({      el: '#app',      store,      template: '<app/>',      components: { app }    })