diff --git a/docs/.vuepress/components/Foo/Bar.vue b/docs/.vuepress/components/Foo/Bar.vue
new file mode 100644
index 0000000000..ab16351156
--- /dev/null
+++ b/docs/.vuepress/components/Foo/Bar.vue
@@ -0,0 +1,15 @@
+<template>
+  <p class="demo">
+    {{ msg }}
+  </p>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello this is <Foo-Bar>'
+    }
+  }
+}
+</script>
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 3090b1cd06..c8b739a339 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -103,7 +103,9 @@ Any `*.vue` files found in `.vuepress/components` are automatically registered a
 └─ .vuepress
    └─ components
       ├─ demo-1.vue
-      └─ OtherComponent.vue
+      ├─ OtherComponent.vue
+      └─ Foo
+         └─ Bar.vue
 ```
 
 Inside any markdown file you can then directly use the components (names are inferred from filenames):
@@ -111,12 +113,15 @@ Inside any markdown file you can then directly use the components (names are inf
 ``` md
 <demo-1/>
 <OtherComponent/>
+<Foo-Bar/>
 ```
 
 <demo-1></demo-1>
 
 <OtherComponent/>
 
+<Foo-Bar/>
+
 ::: warning IMPORTANT
 Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
 :::
diff --git a/docs/zh/guide/using-vue.md b/docs/zh/guide/using-vue.md
index 107213c628..f217192c30 100644
--- a/docs/zh/guide/using-vue.md
+++ b/docs/zh/guide/using-vue.md
@@ -103,7 +103,9 @@ export default {
 └─ .vuepress
    └─ components
       ├─ demo-1.vue
-      └─ OtherComponent.vue
+      ├─ OtherComponent.vue
+      └─ Foo
+         └─ Bar.vue
 ```
 
 你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：
@@ -111,12 +113,15 @@ export default {
 ``` md
 <demo-1/>
 <OtherComponent/>
+<Foo-Bar/>
 ```
 
 <demo-1></demo-1>
 
 <OtherComponent/>
 
+<Foo-Bar/>
+
 ::: warning 重要！
 请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 `<p>` 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， `<p>` 标签中不允许放置任何块级元素。
 :::