diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index 0b6fc64f3..a8db34281 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -133,7 +133,7 @@ The `ConfigProvider` component provides the ability to override CSS variables. Y
 ```
 
 ```js
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 export default {
   setup() {
@@ -142,7 +142,7 @@ export default {
 
     // ThemeVars will be converted to the corresponding CSS variable
     // For example, sliderBarHeight will be converted to `--van-slider-bar-height`
-    const themeVars = {
+    const themeVars = reactive({
       rateIconFullColor: '#07c160',
       sliderBarHeight: '4px',
       sliderButtonWidth: '20px',
@@ -150,7 +150,7 @@ export default {
       sliderActiveBackground: '#07c160',
       buttonPrimaryBackground: '#07c160',
       buttonPrimaryBorderColor: '#07c160',
-    };
+    });
 
     return {
       rate,
@@ -197,13 +197,13 @@ Take the `buttonPrimaryBackground` variable below as an example, the value will
 ```
 
 ```js
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 export default {
   setup() {
-    const themeVars = { buttonPrimaryBackground: 'red' };
-    const themeVarsDark = { buttonPrimaryBackground: 'blue' };
-    const themeVarsLight = { buttonPrimaryBackground: 'green' };
+    const themeVars = reactive({ buttonPrimaryBackground: 'red' });
+    const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });
+    const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });
 
     return {
       themeVars,
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index e0d1009dc..9bf0d66cb 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -131,7 +131,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 ```
 
 ```js
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 export default {
   setup() {
@@ -140,7 +140,7 @@ export default {
 
     // themeVars 内的值会被转换成对应 CSS 变量
     // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
-    const themeVars = {
+    const themeVars = reactive({
       rateIconFullColor: '#07c160',
       sliderBarHeight: '4px',
       sliderButtonWidth: '20px',
@@ -148,7 +148,7 @@ export default {
       sliderActiveBackground: '#07c160',
       buttonPrimaryBackground: '#07c160',
       buttonPrimaryBorderColor: '#07c160',
-    };
+    });
 
     return {
       rate,
@@ -195,13 +195,13 @@ const themeVars: ConfigProviderThemeVars = {
 ```
 
 ```js
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 export default {
   setup() {
-    const themeVars = { buttonPrimaryBackground: 'red' };
-    const themeVarsDark = { buttonPrimaryBackground: 'blue' };
-    const themeVarsLight = { buttonPrimaryBackground: 'green' };
+    const themeVars = reactive({ buttonPrimaryBackground: 'red' });
+    const themeVarsDark = reactive({ buttonPrimaryBackground: 'blue' });
+    const themeVarsLight = reactive({ buttonPrimaryBackground: 'green' });
 
     return {
       themeVars,