diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index ad8758359..ead772705 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -21,7 +21,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
diff --git a/src/steps/README.md b/src/steps/README.md
index 1fda0fd65..56b97b1c3 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -25,11 +25,12 @@ app.use(Steps);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 1,
-    };
+  steup() {
+    const active = ref(1);
+    return { active };
   },
 };
 ```
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index 57f09cf3a..344c9ec73 100644
--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@@ -31,11 +31,12 @@ app.use(Steps);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 1,
-    };
+  steup() {
+    const active = ref(1);
+    return { active };
   },
 };
 ```
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index ed762f0db..8131ee2f5 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -42,47 +42,53 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    nextStep: '下一步',
+    step1: '买家下单',
+    step2: '商家接单',
+    step3: '买家提货',
+    step4: '交易完成',
+    title2: '描述信息',
+    title3: '竖向步骤条',
+    status1: '【城市】物流状态1',
+    status2: '【城市】物流状态',
+    status3: '快件已发货',
+    customStyle: '自定义样式',
+  },
+  'en-US': {
+    nextStep: 'Next Step',
+    step1: 'Step1',
+    step2: 'Step2',
+    step3: 'Step3',
+    step4: 'Step4',
+    title2: 'Description',
+    title3: 'Vertical Steps',
+    status1: '【City】Status1',
+    status2: '【City】Status2',
+    status3: '【City】Status3',
+    customStyle: 'Custom Style',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      nextStep: '下一步',
-      step1: '买家下单',
-      step2: '商家接单',
-      step3: '买家提货',
-      step4: '交易完成',
-      title2: '描述信息',
-      title3: '竖向步骤条',
-      status1: '【城市】物流状态1',
-      status2: '【城市】物流状态',
-      status3: '快件已发货',
-      customStyle: '自定义样式',
-    },
-    'en-US': {
-      nextStep: 'Next Step',
-      step1: 'Step1',
-      step2: 'Step2',
-      step3: 'Step3',
-      step4: 'Step4',
-      title2: 'Description',
-      title3: 'Vertical Steps',
-      status1: '【City】Status1',
-      status2: '【City】Status2',
-      status3: '【City】Status3',
-      customStyle: 'Custom Style',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const active = ref(1);
 
-  data() {
-    return {
-      active: 1,
+    const nextStep = () => {
+      active.value = ++active.value % 4;
     };
-  },
 
-  methods: {
-    nextStep() {
-      this.active = ++this.active % 4;
-    },
+    return {
+      t,
+      active,
+      nextStep,
+    };
   },
 };
 </script>