diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index fde93880186..42f5d6625ed 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -5,7 +5,8 @@ import {
   watchEffect,
   warn,
   VNode,
-  Fragment
+  Fragment,
+  unref
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared/src'
 
@@ -45,7 +46,7 @@ function setVarsOnVNode(
   if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
     const style = vnode.el.style
     for (const key in vars) {
-      style.setProperty(`--${prefix}${key}`, vars[key])
+      style.setProperty(`--${prefix}${key}`, unref(vars[key]))
     }
   } else if (vnode.type === Fragment) {
     ;(vnode.children as VNode[]).forEach(c => setVarsOnVNode(c, vars, prefix))