feat(useCssVar): support prop be ref (vitest-dev#1236)

Co-authored-by: Jelf <353742991@qq.com>

packages/core/useCssVar/demo.vue

@@ -11,6 +11,16 @@ const switchColor = () => {
   else
     color.value = '#df8543'
 }
+
+const elv = ref(null)
+const key = ref('--color')
+const colorVal = useCssVar(key, elv)
+const changeVar = () => {
+  if (key.value === '--color')
+    key.value = '--color-one'
+  else
+    key.value = '--color'
+}
 </script>
 
 <template>
@@ -20,4 +30,10 @@ const switchColor = () => {
   <button @click="switchColor">
     Change Color
   </button>
+  <div ref="elv" style="--color: #7fa998; --color-one: #df8543;" :style="{color: colorVal}">
+    Sample text, {{ key }}: {{ colorVal }}
+  </div>
+  <button style="margin-left: 0;" @click="changeVar">
+    Change Color Variable
+  </button>
 </template>

packages/core/useCssVar/index.md

@@ -13,4 +13,8 @@ import { useCssVar } from '@vueuse/core'
 
 const el = ref(null)
 const color = useCssVar('--color', el)
+
+const elv = ref(null)
+const key = ref('--color')
+const colorVal = useCssVar(key, elv)
 ```

packages/core/useCssVar/index.ts

@@ -1,4 +1,5 @@
-import { computed, ref, watch } from 'vue-demi'
+import { computed, ref, unref, watch } from 'vue-demi'
+import type { MaybeRef } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
@@ -13,16 +14,16 @@ import { unrefElement } from '../unrefElement'
  * @param options
  */
 export function useCssVar(
-  prop: string,
+  prop: MaybeRef<string>,
   target?: MaybeElementRef,
   { window = defaultWindow }: ConfigurableWindow = {},
 ) {
   const variable = ref('')
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
 
   watch(
-    elRef,
-    (el) => {
+    [elRef, () => unref(prop)],
+    ([el, prop]) => {
       if (el && window)
         variable.value = window.getComputedStyle(el).getPropertyValue(prop)
     },
@@ -33,7 +34,7 @@ export function useCssVar(
     variable,
     (val) => {
       if (elRef.value?.style)
-        elRef.value.style.setProperty(prop, val)
+        elRef.value.style.setProperty(unref(prop), val)
     },
   )