diff --git a/components/Common/Hello.vue b/components/Common/Hello.vue
index 56094df..4844f2b 100644
--- a/components/Common/Hello.vue
+++ b/components/Common/Hello.vue
@@ -1,3 +1,13 @@
 <template>
-  <h1>Common Hello.vue</h1>
+  <h1>
+    Common Hello.vue <br /><small>{{ modalDisplay }}</small>
+    <van-button type="primary" @click="modalDisplay = !modalDisplay">
+      主要按钮
+    </van-button>
+  </h1>
 </template>
+
+<script setup>
+const modalDisplay = useModal();
+console.log(modalDisplay.value);
+</script>
diff --git a/components/Hello.vue b/components/Hello.vue
index 89eb55f..07b56cc 100644
--- a/components/Hello.vue
+++ b/components/Hello.vue
@@ -1,3 +1,10 @@
 <template>
-  <div>Hello</div>
+  <div>
+    Hello
+    <h2>{{ modalDisplay }}</h2>
+  </div>
 </template>
+
+<script setup>
+const modalDisplay = useModal();
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 1b1ae25..c0fc1f5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,9 @@
   <div>
     <Hello />
     <CommonHello />
+
+    {{ testString }}
+
     <van-image
       class="user-poster"
       src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"
@@ -43,6 +46,10 @@ export default {
 };
 </script>
 
+<script setup>
+const testString = ref('Hello world');
+</script>
+
 <style lang="less">
 body {
   margin: 0;
diff --git a/plugins/vant.js b/plugins/vant.js
index 1f42ad1..90215b5 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -1,7 +1,7 @@
 // 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
 import 'vant/lib/index.css';
 
-import { Cell, CellGroup, Col, Icon, Image, Row } from 'vant';
+import { Button, Cell, CellGroup, Col, Icon, Image, Row } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
 
@@ -12,5 +12,6 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Image)
     .use(Icon)
     .use(Cell)
+    .use(Button)
     .use(CellGroup);
 });