Vue: Dom in wrong order after hide and show Functional component

[OldDream]

Version

2.6.11

Reproduction link

https://github.com/OldDream/vue-bug-demo

Steps to reproduce

1. start dev server, open the web.
2. click "Click Me First" btn on the top left of screen.
3. Then Click 'functional Component Click To Trigger BUG !'
4. Now we can see the DOM in worng order.

What is expected?

Dom in right place.....

What is actually happening?

Hard to describe the bug in word.
Please open https://github.com/OldDream/vue-bug-demo,
There are pictures showing what happend.

---

Actiually I was useing 2.6.12 but there is no such a option, so I select 2.6.11.

After I downgrade to 2.6.11, the bug is still there.

Bug shows up in the dom with id="aMapContainer", if I add v-once or give it a key, the bug disappear.

If I turn the functional component 'ExitAutoNaviBtn' to a normal component, the bug also disappear.

So I think there might be a bug during diff and patch.

[sirlancelot]

I'm going to guess that the issue is right here:

You'll want to avoid manual DOM manipulation within Vue components. If manual DOM manipulation is unavoidable (for instance when using a library), you should make a separate component which renders a single, empty <div> and do all manual DOM manipulations there (using this.$el after the component has mounted).

[posva]

Dont add HTML manually alongside dynamic content handled by Vue because Vue cannot keep track of it. Add it with Vue instead