[Vuejs]-Assign the same value to different models, they work together

You using the v-bind directive here: :value="userDetail.name". It’s purpose is to update the DOM whenever the value of the variable changes.

You’ll have to create a new property in data to save the old name that you want to display in the text field.

For example:

data() {
  return {
    oldName: ''
    ...
  }
}

async getUser () {
  this.userDetail = API RESPONSE
  this.oldName = this.userDetail.name
}

Change :value="userDetail.name" to :value="oldName".