diff --git a/src/transfer/demos/enUS/basic.demo.md b/src/transfer/demos/enUS/basic.demo.md
index 9c712f57f..df6500800 100644
--- a/src/transfer/demos/enUS/basic.demo.md
+++ b/src/transfer/demos/enUS/basic.demo.md
@@ -7,6 +7,8 @@ Basic example of transfer. If you have tons of data, see next section.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -19,12 +21,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/enUS/filterable.demo.md b/src/transfer/demos/enUS/filterable.demo.md
index 93774c113..ab3b5e996 100644
--- a/src/transfer/demos/enUS/filterable.demo.md
+++ b/src/transfer/demos/enUS/filterable.demo.md
@@ -11,6 +11,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -23,12 +25,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/enUS/large-data.demo.md b/src/transfer/demos/enUS/large-data.demo.md
index 6e8b73ed2..aa0252648 100644
--- a/src/transfer/demos/enUS/large-data.demo.md
+++ b/src/transfer/demos/enUS/large-data.demo.md
@@ -12,6 +12,8 @@ If you have tons of data, you may need to speed the transfer up! Set `virtual-sc
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 42000 }).map((v, i) => ({
     label: 'Option' + i,
@@ -21,15 +23,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 10000 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/enUS/size.demo.md b/src/transfer/demos/enUS/size.demo.md
index a89cb84a7..adfd6a09c 100644
--- a/src/transfer/demos/enUS/size.demo.md
+++ b/src/transfer/demos/enUS/size.demo.md
@@ -20,8 +20,10 @@ They doesn't look harmonious.
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20 }).map((v, i) => ({
+  return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -29,15 +31,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 5 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/zhCN/basic.demo.md b/src/transfer/demos/zhCN/basic.demo.md
index 191d03c27..337d20f18 100644
--- a/src/transfer/demos/zhCN/basic.demo.md
+++ b/src/transfer/demos/zhCN/basic.demo.md
@@ -7,6 +7,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -19,12 +21,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/zhCN/filterable.demo.md b/src/transfer/demos/zhCN/filterable.demo.md
index 13e1c3a7e..ac9727fc0 100644
--- a/src/transfer/demos/zhCN/filterable.demo.md
+++ b/src/transfer/demos/zhCN/filterable.demo.md
@@ -11,6 +11,8 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
   return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
@@ -23,12 +25,12 @@ function createValues () {
   return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/zhCN/large-data.demo.md b/src/transfer/demos/zhCN/large-data.demo.md
index ac8d7c9f4..3fa3f2fe4 100644
--- a/src/transfer/demos/zhCN/large-data.demo.md
+++ b/src/transfer/demos/zhCN/large-data.demo.md
@@ -12,8 +12,10 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20000 }).map((v, i) => ({
+  return Array.apply(null, { length: 42000 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -21,15 +23,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 10000 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```
diff --git a/src/transfer/demos/zhCN/size.demo.md b/src/transfer/demos/zhCN/size.demo.md
index d59849430..551fd151b 100644
--- a/src/transfer/demos/zhCN/size.demo.md
+++ b/src/transfer/demos/zhCN/size.demo.md
@@ -20,8 +20,10 @@
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
+
 function createOptions () {
-  return Array.apply(null, { length: 20 }).map((v, i) => ({
+  return Array.apply(null, { length: 100 }).map((v, i) => ({
     label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
@@ -29,15 +31,15 @@ function createOptions () {
 }
 
 function createValues () {
-  return Array.apply(null, { length: 5 }).map((v, i) => i)
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
-export default {
-  data () {
+export default defineComponent({
+  setup () {
     return {
       options: createOptions(),
-      value: createValues()
+      value: ref(createValues())
     }
   }
-}
+})
 ```