feat(docs): Add usage for Using Components section

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>

docs/guide/using-vue.md

@@ -103,20 +103,25 @@ 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):
 
 ``` 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.
 :::

docs/zh/guide/using-vue.md

@@ -103,20 +103,25 @@ export default {
 └─ .vuepress
    └─ components
       ├─ demo-1.vue
-      └─ OtherComponent.vue
+      ├─ OtherComponent.vue
+      └─ Foo
+         └─ Bar.vue
 ```
 
 你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：
 
 ``` md
 <demo-1/>
 <OtherComponent/>
+<Foo-Bar/>
 ```
 
 <demo-1></demo-1>
 
 <OtherComponent/>
 
+<Foo-Bar/>
+
 ::: warning 重要！
 请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 `<p>` 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， `<p>` 标签中不允许放置任何块级元素。
 :::