diff --git a/src/tag/README.md b/src/tag/README.md
index a14b85c90..aca3356d4 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -48,16 +48,19 @@ app.use(Tag);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      show: true,
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
+    };
+
+    return {
+      show,
+      close,
     };
-  },
-  methods: {
-    close() {
-      this.show = false;
-    },
   },
 };
 ```
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index 9f63bcf71..7f350a9fd 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -58,16 +58,19 @@ app.use(Tag);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      show: true,
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
+    };
+
+    return {
+      show,
+      close,
     };
-  },
-  methods: {
-    close() {
-      this.show = false;
-    },
   },
 };
 ```
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 5bd223536..7e7adacbc 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -98,16 +100,16 @@ export default {
     },
   },
 
-  data() {
-    return {
-      show: true,
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
     };
-  },
 
-  methods: {
-    close() {
-      this.show = false;
-    },
+    return {
+      show,
+      close,
+    };
   },
 };
 </script>