title: v-model overwrite input value in VueJS
body: <p>I have this input</p>
  
  <pre><code>&lt;input type="text" :value="user.firstName" v-model="userInfo.firstName"&gt;
  </code></pre>
  
  <p>that is in a component edit.vue.</p>
  
  <p>In users.vue I have router link</p>
  
  <pre><code>&lt;router-link :to="'/users/edit-user/'+user.id"&gt;&lt;a&gt;Edit&lt;/a&gt;&lt;/router-link&gt;
  </code></pre>
  
  <p>and when I click it takes me on edit component with the id of the actual user on url.</p>
  
  <p>The problem is that if I put this <code>v-model="userInfo.firstName"</code> in that first input overwrites the data that I bring to edit it, the name. </p>
  
  <p>If I delete this <code>v-model="userInfo.firstName"</code> from that input I can see the actual value of the input, that comes from database, I mean the actual name.</p>
  
  <p>I need this  v-model, in that edit page, to take the new input value and send it back to database.</p>
  
  <p>In a normal edit, when you click on edit button, you suppose to see the actual data to edit it, not an empty input.</p>
  
  <p>So why v-model overwrites that user.name value(that comes from a json users, from database) and what can I do to make a see the actual value and be able to send the modified value input in database?</p>