Version

3.0.2

Reproduction link

https://jsfiddle.net/geLtaor2/

Steps to reproduce

Select option "A" and then select option "B" to receive the exception.

However if you select option "B" first you don't receive the exception.

What is expected?

The number 3 should be displayed.

What is actually happening?

The exception "Cannot read property 'nextSibling' of null" is thrown.

You can't manually manipulate the HTML at the same time you make Vue control it. To avoid this kind of problem, wrap vanilla JS inside a component but you can't use both at the same time

@posva I've simplified my example but what I actually do is return back the HTML from an ajax call to the server and then try to wire up any Vue components in the returned string. It works the first time, but if the element has already been mounted via Vue then it doesn't work.

Ah, I see: you cannot mount an app inside of another app, you have to use components instead

After further research I believe this scenario should be supported. I've just tested it in Vue 2 and it works fine. https://jsfiddle.net/cydnhpu6/, therefore it is a regression.

However I was able to fix this in Vue 3 by unmounting the instance. See https://jsfiddle.net/3amdpyjq/ for an updated examle.