Your first question might well be, why would it be necessary to interfere with the Virtual DOM? Vue.js neatly abstracts this concept from us.

Just to quickly recap, when I say Virtual DOM, I’m talking about the DOM-like tree structure that Vue.js creates from your component templates. The documentation gives a good overview.

The Need

In my application, I have a list view where the user can add new entries. Each time an entry is added, it is just a client-side record, not yet persisted to the server. The user will edit it as they wish and click save, at that point the application will send a request and if successful, will update the local data with something important… the server-side record’s unique ID. This is a common pattern, here is a mockup to see what I am talking about.