HMR adds changes twice when using teleport

[martinszeltins]

Version

3.0.6

Reproduction link

https://github.com/martinszeltins/vue-hmr-teleport-duplicates

Steps to reproduce

https://github.com/martinszeltins/vue-hmr-teleport-duplicates

1. Clone the repo, install dependencies and run npm run dev
2. Open the app in the browser and click on "Show menu" button. Menu will open.
3. Now go to App.vue and after <div>3</div> add one more item <div>4</div>
4. Save the file and look at the browser - you will see that hmr added <div>4</div> twice!

What is expected?

The expected result after adding a new item would be this:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

What is actually happening?

Instead HMR has added 4 twice!

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>

---

I'm using Vite 2.0.3 (latest)

[edison1105]

same issue in latest @vue/cli.

[HcySunYang]

The issue is a bit like 376883d, the difference is that this issue brings duplicate mounting instead of unmounting. When performing HMR updates, we deliberately fall back to the non-optimized mode, like this https://github.com/vuejs/vue-next/blob/012dc5a30366d3325c464c3b62da123147788237/packages/runtime-core/src/renderer.ts#L893-L898.
So we should check it when the Teleport component performs updating

Edit: I adjusted the implementation to make it more consistent