diff --git a/src/thing/demos/enUS/basic.demo.md b/src/thing/demos/enUS/basic.demo.md
index 74043a6b3..fec7853b0 100644
--- a/src/thing/demos/enUS/basic.demo.md
+++ b/src/thing/demos/enUS/basic.demo.md
@@ -81,21 +81,22 @@ Thing provides many slots to custom.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      avatar: true,
-      header: true,
-      headerExtra: true,
-      description: true,
-      footer: true,
-      action: true
+      avatar: ref(true),
+      header: ref(true),
+      headerExtra: ref(true),
+      description: ref(true),
+      footer: ref(true),
+      action: ref(true)
     }
   }
-}
+})
 ```
diff --git a/src/thing/demos/enUS/indent.demo.md b/src/thing/demos/enUS/indent.demo.md
index 4245a1be7..2864d35c1 100644
--- a/src/thing/demos/enUS/indent.demo.md
+++ b/src/thing/demos/enUS/indent.demo.md
@@ -81,21 +81,22 @@ Content can be indented after avatar.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      avatar: true,
-      header: true,
-      headerExtra: true,
-      description: true,
-      footer: true,
-      action: true
+      avatar: ref(true),
+      header: ref(true),
+      headerExtra: ref(true),
+      description: ref(true),
+      footer: ref(true),
+      action: ref(true)
     }
   }
-}
+})
 ```
diff --git a/src/thing/demos/zhCN/basic.demo.md b/src/thing/demos/zhCN/basic.demo.md
index ea0aba4e0..afa6f3b5a 100644
--- a/src/thing/demos/zhCN/basic.demo.md
+++ b/src/thing/demos/zhCN/basic.demo.md
@@ -79,21 +79,22 @@ Thing 提供了很多 slot 来定制。
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      avatar: true,
-      header: true,
-      headerExtra: true,
-      description: true,
-      footer: true,
-      action: true
+      avatar: ref(true),
+      header: ref(true),
+      headerExtra: ref(true),
+      description: ref(true),
+      footer: ref(true),
+      action: ref(true)
     }
   }
-}
+})
 ```
diff --git a/src/thing/demos/zhCN/indent.demo.md b/src/thing/demos/zhCN/indent.demo.md
index 94ea69514..38a3126d3 100644
--- a/src/thing/demos/zhCN/indent.demo.md
+++ b/src/thing/demos/zhCN/indent.demo.md
@@ -79,21 +79,22 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { CashOutline as CashIcon } from '@vicons/ionicons5'
 
-export default {
+export default defineComponent({
   components: {
     CashIcon
   },
-  data () {
+  setup () {
     return {
-      avatar: true,
-      header: true,
-      headerExtra: true,
-      description: true,
-      footer: true,
-      action: true
+      avatar: ref(true),
+      header: ref(true),
+      headerExtra: ref(true),
+      description: ref(true),
+      footer: ref(true),
+      action: ref(true)
     }
   }
-}
+})
 ```