Me too I was hoping the Vue instance would be automatically destroyed when the DOM objects are destroyed, but it isn’t happening in my testing. We have to manually call the $destroy() on the instance.
I noticed there is an __vue__ property added to the html element, I will play with it and try to call this.element.__vue__.$destroy() before mounting new instance.
There is another thing that bothers me when re-creating instances; we can see the component visual being removed and replaced. It is particularly noticeable when rendering a table with many rows. This makes a less ‘polished’ experience if I compare to a simple jquery html replace.
What I would prefer is to create a Vue instance only once (per doc), and then call a refresh method on the component. However I could not find any reliable hook event to create the instance when the form is shown. More details here: Form event on open - #4 by guimorin