Codepen here: codepen.io/prashantp26/pen/JXxJYz

Scenario: Simple text field displays vue data. When you change it, cancel and save buttons appear so you can take those actions. The buttons work as expected.

However, the input field also accepts 'esc' key to cancel. When you do this, data model must revert to original. While it works with the button, it doesn't work with the 'esc'.

Here's what happens precisely:

When you type and change data then hit esc: view-model data does revert as expected inside the vue instance. This can be seen on a console.log(). The data on the page however does not 'react'.

If you change the data, focus OUT from the input field, focus back in and THEN hit esc, things work as expected. Data on page changes, so does data in vue instance.

Any idea why this happens and how I can tame this GOTCHA? It's a subtle problem but a rather interesting one.

I have tried invoking nextTick() function on Vue class, but to no avail.

Any idea what's going on?