diff --git a/src/time-picker/demos/enUS/actions.demo.md b/src/time-picker/demos/enUS/actions.demo.md
index b427e0cd8..443812d59 100644
--- a/src/time-picker/demos/enUS/actions.demo.md
+++ b/src/time-picker/demos/enUS/actions.demo.md
@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ts1: null,
-      ts2: 861333934000
+      ts1: ref(null),
+      ts2: ref(861333934000)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/enUS/basic.demo.md b/src/time-picker/demos/enUS/basic.demo.md
index e0eb1b4c1..04cc75a47 100644
--- a/src/time-picker/demos/enUS/basic.demo.md
+++ b/src/time-picker/demos/enUS/basic.demo.md
@@ -10,12 +10,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null,
-      time1: 1183135260000
+      time0: ref(null),
+      time1: ref(1183135260000)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/enUS/disabled-time.demo.md b/src/time-picker/demos/enUS/disabled-time.demo.md
index 72372d09d..8f291a723 100644
--- a/src/time-picker/demos/enUS/disabled-time.demo.md
+++ b/src/time-picker/demos/enUS/disabled-time.demo.md
@@ -12,32 +12,32 @@ You can disable some time.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
-    isHourDisabled (hour) {
-      return hour % 2 === 0
-    },
-    isMinuteDisabled (minute, selectedHour) {
-      if (selectedHour === null) return false
-      if (Number(selectedHour) < 12) {
-        return minute < 30
-      } else {
-        return false
-      }
-    },
-    isSecondDisabled (second, selectedMinute, selectedHour) {
-      if (selectedHour === null || selectedMinute === null) return false
-      if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
-        return second < 40
-      } else {
-        return false
+      time0: ref(null),
+      isHourDisabled (hour) {
+        return hour % 2 === 0
+      },
+      isMinuteDisabled (minute, selectedHour) {
+        if (selectedHour === null) return false
+        if (Number(selectedHour) < 12) {
+          return minute < 30
+        } else {
+          return false
+        }
+      },
+      isSecondDisabled (second, selectedMinute, selectedHour) {
+        if (selectedHour === null || selectedMinute === null) return false
+        if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
+          return second < 40
+        } else {
+          return false
+        }
       }
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/enUS/format.demo.md b/src/time-picker/demos/enUS/format.demo.md
index 53962335d..2d5ce13a8 100644
--- a/src/time-picker/demos/enUS/format.demo.md
+++ b/src/time-picker/demos/enUS/format.demo.md
@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: null
+      time: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/enUS/size.demo.md b/src/time-picker/demos/enUS/size.demo.md
index 6b2545994..072b70d7f 100644
--- a/src/time-picker/demos/enUS/size.demo.md
+++ b/src/time-picker/demos/enUS/size.demo.md
@@ -11,11 +11,13 @@ Time Picker can be `small`, `medium` or `large` sized.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      timestamp: null
+      timestamp: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/enUS/step-time.demo.md b/src/time-picker/demos/enUS/step-time.demo.md
index 45829c52c..f9c4387e0 100644
--- a/src/time-picker/demos/enUS/step-time.demo.md
+++ b/src/time-picker/demos/enUS/step-time.demo.md
@@ -12,11 +12,13 @@ Pass a number as step or use an array to specify the items you want to show, inp
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: 1183135260000
+      time: ref(1183135260000)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/actions.demo.md b/src/time-picker/demos/zhCN/actions.demo.md
index 905a4efc1..f13a35a5b 100644
--- a/src/time-picker/demos/zhCN/actions.demo.md
+++ b/src/time-picker/demos/zhCN/actions.demo.md
@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      ts1: null,
-      ts2: 861333934000
+      ts1: ref(null),
+      ts2: ref(861333934000)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/basic.demo.md b/src/time-picker/demos/zhCN/basic.demo.md
index 1c55a0cf2..aebaa1805 100644
--- a/src/time-picker/demos/zhCN/basic.demo.md
+++ b/src/time-picker/demos/zhCN/basic.demo.md
@@ -8,12 +8,14 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null,
-      time1: 1183135260000
+      time0: ref(null),
+      time1: ref(1183135260000)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/disabled-time.demo.md b/src/time-picker/demos/zhCN/disabled-time.demo.md
index 874650ade..72c1e5fca 100644
--- a/src/time-picker/demos/zhCN/disabled-time.demo.md
+++ b/src/time-picker/demos/zhCN/disabled-time.demo.md
@@ -12,32 +12,32 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time0: null
-    }
-  },
-  methods: {
-    isHourDisabled (hour) {
-      return hour % 2 === 0
-    },
-    isMinuteDisabled (minute, selectedHour) {
-      if (selectedHour === null) return false
-      if (Number(selectedHour) < 12) {
-        return minute < 30
-      } else {
-        return false
-      }
-    },
-    isSecondDisabled (second, selectedMinute, selectedHour) {
-      if (selectedHour === null || selectedMinute === null) return false
-      if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
-        return second < 40
-      } else {
-        return false
+      time0: ref(null),
+      isHourDisabled (hour) {
+        return hour % 2 === 0
+      },
+      isMinuteDisabled (minute, selectedHour) {
+        if (selectedHour === null) return false
+        if (Number(selectedHour) < 12) {
+          return minute < 30
+        } else {
+          return false
+        }
+      },
+      isSecondDisabled (second, selectedMinute, selectedHour) {
+        if (selectedHour === null || selectedMinute === null) return false
+        if (Number(selectedHour) > 20 && Number(selectedMinute) < 30) {
+          return second < 40
+        } else {
+          return false
+        }
       }
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/format.demo.md b/src/time-picker/demos/zhCN/format.demo.md
index af31bb1ec..289e01971 100644
--- a/src/time-picker/demos/zhCN/format.demo.md
+++ b/src/time-picker/demos/zhCN/format.demo.md
@@ -5,11 +5,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: null
+      time: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/size.demo.md b/src/time-picker/demos/zhCN/size.demo.md
index 2b4dc3cb6..802d09557 100644
--- a/src/time-picker/demos/zhCN/size.demo.md
+++ b/src/time-picker/demos/zhCN/size.demo.md
@@ -11,11 +11,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      timestamp: null
+      timestamp: ref(null)
     }
   }
-}
+})
 ```
diff --git a/src/time-picker/demos/zhCN/step-time.demo.md b/src/time-picker/demos/zhCN/step-time.demo.md
index 6cf1c806a..2a566093e 100644
--- a/src/time-picker/demos/zhCN/step-time.demo.md
+++ b/src/time-picker/demos/zhCN/step-time.demo.md
@@ -12,11 +12,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      time: 1183135260000
+      time: ref(1183135260000)
     }
   }
-}
+})
 ```