diff --git a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
index c2d7ab4a78..f0707e59ea 100644
--- a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
@@ -1,14 +1,25 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script setup>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
 
-const params = {
+const params = ref({
   value: '测试二维码数据',
   color: '#1677ff',
   size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
+})
+
+const changeColor = () => {
+  params.value.color = '#666'
 }
 </script>
diff --git a/examples/sites/demos/pc/app/qr-code/style.vue b/examples/sites/demos/pc/app/qr-code/style.vue
index 4842e5c7bc..20aaa89c91 100644
--- a/examples/sites/demos/pc/app/qr-code/style.vue
+++ b/examples/sites/demos/pc/app/qr-code/style.vue
@@ -1,13 +1,20 @@
 <template>
-  <tiny-qr-code v-bind="params"></tiny-qr-code>
+  <div class="qr-code-container">
+    <div>
+      <tiny-button @click="changeColor">改变颜色</tiny-button>
+    </div>
+    <br />
+    <tiny-qr-code v-bind="params"></tiny-qr-code>
+  </div>
 </template>
 
 <script>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode
+    TinyQrCode,
+    TinyButton
   },
   data() {
     return {
@@ -18,6 +25,11 @@ export default {
         style: { background: '#f5f5f5', padding: '24px' }
       }
     }
+  },
+  methods: {
+    changeColor() {
+      this.params.color = '#666'
+    }
   }
 }
 </script>
diff --git a/packages/renderless/src/qr-code/vue.ts b/packages/renderless/src/qr-code/vue.ts
index d54717bd4d..678fc8a6b4 100644
--- a/packages/renderless/src/qr-code/vue.ts
+++ b/packages/renderless/src/qr-code/vue.ts
@@ -21,7 +21,7 @@ export const renderless = (props, { reactive, watch, onMounted }, { vm, emit },
   })
 
   watch(
-    () => [props.level, props.value],
+    () => [props.level, props.value, props.color, props.style, props.size, props.icon, props.iconSize, props.bordered],
     () => {
       api.draw()
       api.change()