Vue component loses input when asynchronous call updates another property

Question

I have a component that has an <input> with a :value set to a certain property. The component has another property unrelated to this input, which can get updated asynchronously (AJAX call). Whenever you're typing inside the input and the asynchronous call finishes, updating the other property, your typed input is reset.

To recreate this problem I've created a jsfiddle using a setInterval to simulate the async call and increment the other passed property. Try typing in the input, it will get reset every second. If you're quick enough, you can tab out and cause the @change to trigger the actual update.

The question is: why is the update to the other prop invalidating/rerendering the component and how can I work around this?

Note that v-model="person.name" is not a valid solution here - I need to know the old and new value, which is why I'm using a manual :value/@change combo.

Edit: The updateName method also really only needs to be triggered when the user leaves the input field. This is because the code run inside it is relatively CPU intensive and only needs to run when the user is done with the input and leaves it (in my actual code, not the jsfiddle).

Edit2: Is there some way to not let it re-render the entire component, but only the relevant pieces?

Answer 1

Because the parent component is changing a property of the child component, it has to re-render (parts of) the child component. Since you are using @change, instead of @input, your changes are not saved yet to the reactive variable person.name, it only works if you click tab quick enough. One solution would be to change @change to @input (which better resembles v-model):

https://jsfiddle.net/mf67xq1e/

Another (better) option is to use v-model and use a watcher to retrieve both the old and the new value:

  watch: {
    // whenever person.name changes, this function will run
    "person.name": function (newName, oldName) {
      console.log("newName:", newName);
      console.log("newName:", oldName);
    }
  }

https://jsfiddle.net/mf67xq1e/1/

EDIT: As you mentioned you only need to trigger something when you blur/leave the input field, seperate the reactivity of the variable and the triggering of your other method (e.g. updating some other variable or something), in two seperate variables:

https://jsfiddle.net/ta9cgnx0/

EDIT 2: Cleaner option with v-model and a seperate call for your other trigger on blur:

https://jsfiddle.net/ay1g63u8/