diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index ec7daf4cca..8abb17e461 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -194,6 +194,7 @@ const sidebar = {
         '/guide/migration/key-attribute',
         '/guide/migration/keycode-modifiers',
         '/guide/migration/listeners-removed',
+        '/guide/migration/mount-changes',
         '/guide/migration/props-data',
         '/guide/migration/props-default-this',
         '/guide/migration/render-function-api',
diff --git a/src/.vuepress/public/images/lifecycle.svg b/src/.vuepress/public/images/lifecycle.svg
index 287e1303e5..e476cb08d8 100644
--- a/src/.vuepress/public/images/lifecycle.svg
+++ b/src/.vuepress/public/images/lifecycle.svg
@@ -128,7 +128,7 @@
       <path d="M96.494 56.399l.01 1 .81 75.583 6-.064-6.85 14.074-7.15-13.924 6-.064-.81-75.584-.01-1 2-.021z" fill="#9AA9B2" fill-rule="nonzero"/>
       <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="192" height="58" rx="8"/>
       <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
-        <tspan x="36.456" y="24">Create app.$el and</tspan> <tspan x="41.148" y="42.5">replace “el” with it</tspan>
+        <tspan x="36.456" y="24">Create app.$el and</tspan> <tspan x="52.148" y="42.5">append it to el</tspan>
       </text>
     </g>
     <g transform="translate(367 855)">
@@ -144,4 +144,4 @@
       </text>
     </g>
   </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/api/application-api.md b/src/api/application-api.md
index 4571262091..cc37f188cc 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -191,7 +191,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 
 - **Usage:**
 
-  Mounts a root component of the application instance on the provided DOM element.
+  The `innerHTML` of the provided DOM element will be replaced with the rendered template of the application root component.
 
 - **Example:**
 
diff --git a/src/api/options-dom.md b/src/api/options-dom.md
index f11407afaf..c6eb43856d 100644
--- a/src/api/options-dom.md
+++ b/src/api/options-dom.md
@@ -6,7 +6,7 @@
 
 - **Details:**
 
-  A string template to be used as the markup for the component instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
+  A string template to be used as the markup for the component instance. The template will **replace** the `innerHTML` of mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
 
   If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
 
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index cf462c015e..5a38e1e633 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -104,13 +104,13 @@ The following consists a list of breaking changes from 2.x:
 - [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
 - [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
 - `<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
-- In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead - this means the container itself is no longer considered part of the template.
+- [Mounted application does not replace the element it's mounted to](/guide/migration/mount-changes.html)
 - [Lifecycle `hook:` events prefix changed to `vnode-`](/guide/migration/vnode-lifecycle-events.html)
 
 ### Removed APIs
 
 - [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html)
-- [$on, $off and $once instance methods](/guide/migration/events-api.html)
+- [$on, $off and \$once instance methods](/guide/migration/events-api.html)
 - [Filters](/guide/migration/filters.html)
 - [Inline templates attributes](/guide/migration/inline-template-attribute.html)
 - [`$children` instance property](/guide/migration/children.html)
diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md
new file mode 100644
index 0000000000..5fa159de24
--- /dev/null
+++ b/src/guide/migration/mount-changes.md
@@ -0,0 +1,94 @@
+---
+title: 'Mount API changes'
+badges:
+  - breaking
+---
+
+# Mounted application does not replace the element <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+In Vue 2.x, when mounting an application that has a `template`, the rendered content replaces the element we mount to. In Vue 3.x, the rendered application is appended as a child of such an element, replacing element's `innerHTML`.
+
+## 2.x Syntax
+
+In Vue 2.x, we pass an HTML element selector to `new Vue()` or `$mount`:
+
+```js
+new Vue({
+  el: '#app',
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div
+  `
+})
+
+// or
+const app = new Vue({
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div
+  `
+})
+
+app.$mount('#app')
+```
+
+When we mount this application to the page that has a `div` with the passed selector (in our case, it's `id="app"`):
+
+```html
+<body>
+  <div id="app">
+    Some app content
+  </div>
+</body>
+```
+
+in the rendered result, the mentioned `div` will be replaced with the rendered application content:
+
+```html
+<body>
+  <div id="rendered">Hello Vue!</div>
+</body>
+```
+
+## 3.x Syntax
+
+In Vue 3.x, when we mount an application, its rendered content will replace the `innerHTML` of the element we pass to `mount`:
+
+```js
+const app = Vue.createApp({
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div>
+  `
+})
+
+app.mount('#app')
+```
+
+When this app is mounted to the page that has a `div` with `id="app"`, this will result in:
+
+```html
+<body>
+  <div id="app" data-v-app="">
+    <div id="rendered">Hello Vue!</div>
+  </div>
+</body>
+```
+
+## See also
+
+- [`mount` API](/api/application-api.html#mount)