diff --git a/src/input/demos/enUS/basic.demo.md b/src/input/demos/enUS/basic.demo.md
index ebda6191d..bf4d0a3ba 100644
--- a/src/input/demos/enUS/basic.demo.md
+++ b/src/input/demos/enUS/basic.demo.md
@@ -10,11 +10,13 @@ Basic usage of input.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: null
+      value: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/input/demos/enUS/icon.demo.md b/src/input/demos/enUS/icon.demo.md
index 947c70359..9c6b8e049 100644
--- a/src/input/demos/enUS/icon.demo.md
+++ b/src/input/demos/enUS/icon.demo.md
@@ -26,10 +26,11 @@ Fill content in prefix or suffix of the input.
 
 ```js
 import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     FlashIcon
   }
-}
+})
 ```
diff --git a/src/input/demos/enUS/input-group.demo.md b/src/input/demos/enUS/input-group.demo.md
index d8d1e8fee..3da9cbe43 100644
--- a/src/input/demos/enUS/input-group.demo.md
+++ b/src/input/demos/enUS/input-group.demo.md
@@ -30,16 +30,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      selectOptions: [
+      selectOptions: ref([
         {
           label: 'option',
           value: 'option'
         }
-      ],
-      cascaderOptions: [
+      ]),
+      cascaderOptions: ref([
         {
           label: 'option-1',
           value: 'option-1',
@@ -50,8 +52,8 @@ export default {
             }
           ]
         }
-      ]
+      ])
     }
   }
-}
+})
 ```
diff --git a/src/input/demos/zhCN/basic.demo.md b/src/input/demos/zhCN/basic.demo.md
index c32966a66..76b3beb2c 100644
--- a/src/input/demos/zhCN/basic.demo.md
+++ b/src/input/demos/zhCN/basic.demo.md
@@ -14,11 +14,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: null
+      value: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/input/demos/zhCN/icon-debug.demo.md b/src/input/demos/zhCN/icon-debug.demo.md
index 58c21a80b..8b893c841 100644
--- a/src/input/demos/zhCN/icon-debug.demo.md
+++ b/src/input/demos/zhCN/icon-debug.demo.md
@@ -96,12 +96,13 @@
 
 ```js
 import { MdSearch } from '@vicons/ionicons4'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     MdSearch
   }
-}
+})
 ```
 
 ```css
diff --git a/src/input/demos/zhCN/icon.demo.md b/src/input/demos/zhCN/icon.demo.md
index 7fae1da90..57364773a 100644
--- a/src/input/demos/zhCN/icon.demo.md
+++ b/src/input/demos/zhCN/icon.demo.md
@@ -26,10 +26,11 @@
 
 ```js
 import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   components: {
     FlashIcon
   }
-}
+})
 ```
diff --git a/src/input/demos/zhCN/input-group.demo.md b/src/input/demos/zhCN/input-group.demo.md
index 88816ce53..273d18dfd 100644
--- a/src/input/demos/zhCN/input-group.demo.md
+++ b/src/input/demos/zhCN/input-group.demo.md
@@ -30,26 +30,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value1: null,
-      value2: null,
-      value3: null,
-      value4: null,
-      value5: 'option',
-      value6: null,
-      value7: ['option'],
-      value8: null,
-      value9: null,
-      value10: null,
-      selectOptions: [
+      selectOptions: ref([
         {
           label: 'option',
           value: 'option'
         }
-      ],
-      cascaderOptions: [
+      ]),
+      cascaderOptions: ref([
         {
           label: 'option-1',
           value: 'option-1',
@@ -60,8 +52,8 @@ export default {
             }
           ]
         }
-      ]
+      ])
     }
   }
-}
+})
 ```