diff --git a/src/collapse/README.md b/src/collapse/README.md
index 67a5dc338..60c0e7bc8 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -26,11 +26,12 @@ Use `v-model` to control the name of active panels.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeNames: ['1'],
-    };
+  setup() {
+    const activeNames = ref(['1']);
+    return { activeNames };
   },
 };
 ```
@@ -48,11 +49,12 @@ In accordion mode, only one panel can be expanded at the same time.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeName: '1',
-    };
+  setup() {
+    const activeName = ref('1');
+    return { activeName };
   },
 };
 ```
@@ -90,11 +92,12 @@ Use the `disabled` prop to disable CollaseItem.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeNames: ['1'],
-    };
+  setup() {
+    const activeNames = ref(['1']);
+    return { activeNames };
   },
 };
 ```
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index b44572f7e..2577a52b0 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -30,11 +30,12 @@ app.use(CollapseItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeNames: ['1'],
-    };
+  setup() {
+    const activeNames = ref(['1']);
+    return { activeNames };
   },
 };
 ```
@@ -52,11 +53,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeName: '1',
-    };
+  setup() {
+    const activeName = ref('1');
+    return { activeName };
   },
 };
 ```
@@ -92,11 +94,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeNames: ['1'],
-    };
+  setup() {
+    const activeNames = ref(['1']);
+    return { activeNames };
   },
 };
 ```
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index d2efc3773..1ad17b625 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -60,27 +60,36 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      accordion: '手风琴',
-      titleSlot: '自定义标题内容',
-      text: '代码是写出来给人看的，附带能在机器上运行',
-    },
-    'en-US': {
-      accordion: 'Accordion',
-      titleSlot: 'Custom title',
-      text: 'Content',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    accordion: '手风琴',
+    titleSlot: '自定义标题内容',
+    text: '代码是写出来给人看的，附带能在机器上运行',
+  },
+  'en-US': {
+    accordion: 'Accordion',
+    titleSlot: 'Custom title',
+    text: 'Content',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       active1: [0],
       active2: 0,
       active3: [],
       active4: [],
+    });
+
+    return {
+      ...toRefs(state),
+      t,
     };
   },
 };