diff --git a/packages/vue/examples/vue3/src/App.vue b/packages/vue/examples/vue3/src/App.vue
index ce2727d31..94d580f01 100644
--- a/packages/vue/examples/vue3/src/App.vue
+++ b/packages/vue/examples/vue3/src/App.vue
@@ -33,6 +33,10 @@ export default {
       this.year = '2022';
       this.chartData = data2;
     }, 1000);
+    setTimeout(() => {
+      this.year = '2021';
+      this.chartData = data1;
+    }, 3000);
   },
   render() {
     const { year, chartData } = this;
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 7cb3abe93..b84585174 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -67,19 +67,19 @@ export default {
     getProps() {
       const { $props, $slots } = this;
       const props = toRaw($props);
-      props.children = toRawChildren($slots);
-      return props;
+      const canvasEl = this.$el;
+      const context = canvasEl.getContext('2d');
+      return {
+        ...props,
+        // context 内部创建，不能被覆盖
+        context,
+        children: toRawChildren($slots),
+      };
     },
   },
   mounted() {
-    const canvasEl = this.$el;
-    const context = canvasEl.getContext('2d');
     const props = this.getProps();
-    const canvas = new Canvas({
-      ...props,
-      // context 内部创建，不能被覆盖
-      context,
-    });
+    const canvas = new Canvas(props);
     canvas.render();
     this.canvas = canvas;
   },