docs(Radio): use composition api

src/radio/demo/index.vue

@@ -54,13 +54,13 @@
       <van-radio name="1">
         {{ t('radio') }} 1
         <template #icon="{ checked }">
-          <img :src="checked ? icon.active : icon.inactive" />
+          <img :src="checked ? activeIcon : inactiveIcon" />
         </template>
       </van-radio>
       <van-radio name="2">
         {{ t('radio') }} 2
         <template #icon="{ checked }">
-          <img :src="checked ? icon.active : icon.inactive" />
+          <img :src="checked ? activeIcon : inactiveIcon" />
         </template>
       </van-radio>
     </van-radio-group>
@@ -92,6 +92,8 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -120,8 +122,8 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       radio1: '1',
       radio2: '2',
       radio3: '1',
@@ -131,10 +133,12 @@ export default {
       radioShape: '1',
       radioIconSize: '1',
       radioHorizontal: '1',
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      },
+    });
+
+    return {
+      ...toRefs(state),
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };
   },
 };