diff --git a/src/switch/README.md b/src/switch/README.md
index 082a42c84..df163661c 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -19,11 +19,12 @@ app.use(Switch);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      checked: true,
-    };
+  setup() {
+    const checked = ref(true);
+    return { checked };
   },
 };
 ```
@@ -59,21 +60,25 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+import { Dialog } from 'vant';
+
 export default {
-  data() {
-    return {
-      checked: true,
-    };
-  },
-  methods: {
-    onUpdateValue(checked) {
+  setup() {
+    const checked = ref(true);
+    const onUpdateValue = (newValue) => {
       Dialog.confirm({
         title: 'Confirm',
         message: 'Are you sure to toggle switch?',
       }).then(() => {
-        this.checked = checked;
+        checked.value = newValue;
       });
-    },
+    };
+
+    return {
+      checked,
+      onUpdateValue,
+    };
   },
 };
 ```
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index c51cb0aa1..dc5f8fd22 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -25,11 +25,12 @@ app.use(Switch);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      checked: true,
-    };
+  setup() {
+    const checked = ref(true);
+    return { checked };
   },
 };
 ```
@@ -75,21 +76,25 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+import { Dialog } from 'vant';
+
 export default {
-  data() {
-    return {
-      checked: true,
-    };
-  },
-  methods: {
-    onUpdateValue(checked) {
+  setup() {
+    const checked = ref(true);
+    const onUpdateValue = (newValue) => {
       Dialog.confirm({
         title: '提醒',
         message: '是否切换开关？',
       }).then(() => {
-        this.checked = checked;
+        checked.value = newValue;
       });
-    },
+    };
+
+    return {
+      checked,
+      onUpdateValue,
+    };
   },
 };
 ```
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 744a1903a..5c163e49e 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -24,7 +24,7 @@
   </demo-block>
 
   <demo-block :title="t('asyncControl')">
-    <van-switch :model-value="checked4" @update:model-value="onInput" />
+    <van-switch :model-value="checked4" @update:model-value="onUpdateValue" />
   </demo-block>
 
   <demo-block :title="t('withCell')">
@@ -37,6 +37,10 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Dialog from '../../dialog';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -59,28 +63,30 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       checked: true,
       checked2: true,
       checked3: true,
       checked4: true,
       checked5: true,
       checked6: false,
-    };
-  },
+    });
 
-  methods: {
-    onInput(checked) {
-      this.$dialog
-        .confirm({
-          title: this.t('title'),
-          message: this.t('message'),
-        })
-        .then(() => {
-          this.checked4 = checked;
-        });
-    },
+    const onUpdateValue = (checked) => {
+      Dialog.confirm({
+        title: t('title'),
+        message: t('message'),
+      }).then(() => {
+        state.checked4 = checked;
+      });
+    };
+
+    return {
+      ...toRefs(state),
+      onUpdateValue,
+    };
   },
 };
 </script>