diff --git a/src/overlay/README.md b/src/overlay/README.md
index 6b572382d..c30c016dd 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -20,13 +20,14 @@ app.use(Overlay);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      show: false
-    }
-  }
-},
+  setup() {
+    const show = ref(false);
+    return { show };
+  },
+};
 ```
 
 ### Embedded Content
diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md
index 6ab916558..6f6f88598 100644
--- a/src/overlay/README.zh-CN.md
+++ b/src/overlay/README.zh-CN.md
@@ -24,13 +24,14 @@ app.use(Overlay);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      show: false
-    }
-  }
-},
+  setup() {
+    const show = ref(false);
+    return { show };
+  },
+};
 ```
 
 ### 嵌入内容
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index 3c16ac00a..60225c58d 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -3,7 +3,7 @@
     <van-button
       type="primary"
       :text="t('showOverlay')"
-      style="margin-left: 16px;"
+      style="margin-left: 16px"
       @click="show = true"
     />
     <van-overlay :show="show" @click="show = false" />
@@ -13,7 +13,7 @@
     <van-button
       type="primary"
       :text="t('embeddedContent')"
-      style="margin-left: 16px;"
+      style="margin-left: 16px"
       @click="showEmbedded = true"
     />
     <van-overlay :show="showEmbedded" @click="showEmbedded = false">
@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -37,11 +39,13 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       show: false,
       showEmbedded: false,
-    };
+    });
+
+    return toRefs(state);
   },
 };
 </script>