diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
index 65162751ef..2e5f7e5aa3 100644
--- a/src/v2/guide/components-dynamic-async.md
+++ b/src/v2/guide/components-dynamic-async.md
@@ -24,10 +24,12 @@ When switching between these components though, you'll sometimes want to maintai
     v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
     v-on:click="currentTab = tab"
   >{{ tab }}</button>
-  <component
-    v-bind:is="currentTabComponent"
-    class="dynamic-component-demo-tab"
-  ></component>
+  <div>
+    <component
+      v-bind:is="currentTabComponent"
+      class="dynamic-component-demo-tab"
+    ></component>
+  </div>
 </div>
 <script>
 Vue.component('tab-posts', {
@@ -170,12 +172,14 @@ Check out the result below:
     v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
     v-on:click="currentTab = tab"
   >{{ tab }}</button>
-  <keep-alive>
-    <component
-      v-bind:is="currentTabComponent"
-      class="dynamic-component-demo-tab"
-    ></component>
-  </keep-alive>
+  <div>
+    <keep-alive>
+      <component
+        v-bind:is="currentTabComponent"
+        class="dynamic-component-demo-tab"
+      ></component>
+    </keep-alive>
+  </div>
 </div>
 <script>
 new Vue({
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index c199b3c44d..44d2b9a0ed 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -543,10 +543,12 @@ Sometimes, it's useful to dynamically switch between components, like in a tabbe
   >
     {{ tab }}
   </button>
-  <component
-    v-bind:is="currentTabComponent"
-    class="dynamic-component-demo-tab"
-  ></component>
+  <div>
+    <component
+      v-bind:is="currentTabComponent"
+      class="dynamic-component-demo-tab"
+    ></component>
+  </div>
 </div>
 <script>
 Vue.component('tab-home', { template: '<div>Home component</div>' })