Ensure Vue instance's vnode and element is up to date

[HerringtonDarkholme]

Fix #4284 , to recap the bug, in one sentence:

vm.$el should always be the same as vm.$vnode.elm

More detail:

1. If a component changes its root element during rendering, all ancestors' placeholder root element's element should be all updated.

2. If one component is the root element of another component, for example wrapper in the test case, and wrapper's parent is updated (which triggers wrapper's updateFromParent), wrapper's $vnode is not the same as comp's $vnode.parent. While in the initial rendering, these two vnodes are the same one.

To simplify these two statements, we have to keep one invariant: vm.$el should always be the same as vm.$vnode.elm. Otherwise vdom patching will mistakenly insert new dom node.

If we correctly sync vnode's element when child tree's root changes its tag (1), and update vm's vnode when parent is updated(2), we can ensure $el is up to date.

I hope I made myself understood. it is quite perplexing.

I don't think this is the only way to fix the edge case. If @yyx990803 and other members have better alternatives, I'm happy to see it.

[yyx990803]

@HerringtonDarkholme hey - let me know your email address so I can invite you to the Vue team slack :)