diff --git a/src/pagination/README.md b/src/pagination/README.md
index 7e92512b8..83b92105f 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -19,11 +19,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentPage: 1,
-    };
+  setup() {
+    const currentPage = ref(1);
+    return { currentPage };
   },
 };
 ```
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index f054ed8c9..50f6072c9 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -21,11 +21,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentPage: 1,
-    };
+  setup() {
+    const currentPage = ref(1);
+    return { currentPage };
   },
 };
 ```
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index 20d22a37c..5d9c1e098 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -48,31 +48,40 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      title2: '简单模式',
-      title3: '显示省略号',
-      title4: '自定义按钮',
-      prevText: '上一页',
-      nextText: '下一页',
-    },
-    'en-US': {
-      title2: 'Simple Mode',
-      title3: 'Show ellipses',
-      title4: 'Custom Button',
-      prevText: 'Prev',
-      nextText: 'Next',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    title2: '简单模式',
+    title3: '显示省略号',
+    title4: '自定义按钮',
+    prevText: '上一页',
+    nextText: '下一页',
+  },
+  'en-US': {
+    title2: 'Simple Mode',
+    title3: 'Show ellipses',
+    title4: 'Custom Button',
+    prevText: 'Prev',
+    nextText: 'Next',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       currentPage1: 1,
       currentPage2: 1,
       currentPage3: 1,
       currentPage4: 1,
+    });
+
+    return {
+      ...toRefs(state),
+      t,
     };
   },
 };