diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index 286a4176076..d2dcdb33f52 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -3,6 +3,7 @@ import {
   Static,
   type VNode,
   getCurrentInstance,
+  onBeforeMount,
   onMounted,
   onUnmounted,
   warn,
@@ -42,8 +43,11 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
     updateTeleports(vars)
   }
 
-  onMounted(() => {
+  onBeforeMount(() => {
     watchPostEffect(setVars)
+  })
+
+  onMounted(() => {
     const ob = new MutationObserver(setVars)
     ob.observe(instance.subTree.el!.parentNode, { childList: true })
     onUnmounted(() => ob.disconnect())