useColorMode selector option for template ref doesn't quite work

[VividLemon]

Describe the bug

Awhile ago I requested a feature for the selector for useColorMode to be able to use a template ref. It was graciously implemented. However, it wasn't until recently when I actually went to use the ability. I am not sure if this worked pre v10, but in v10, it does not quite work.

<template>
  <div ref="el">
    foo
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useColorMode} from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

const mode = useColorMode({selector: el})
</script>

The first issue is that the typings are a bit off, it doesn't recognize that 'el' is valid. Even though I believe it should be... "MaybeRefOrGetter<HTMLElement | null | undefined>" should be valid since this is a Ref.

The second issue is that is simply doesn't work. I would like this functionality as it means you don't have to float your ui with selectors. As the template ref will magically disappear. The alternative would be needing to make some ids. Which isn't bad, but if you're not going to use them anyways...

Reproduction

view above

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 1.76 GB / 15.39 GB
  Binaries:
    Node: 18.15.0 - ~\AppData\Local\fnm_multishells\16912_1681955956421\node.EXE
    npm: 9.5.0 - ~\AppData\Local\fnm_multishells\16912_1681955956421\npm.CMD    
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.48)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[truc0]

I have tried the official demo on stackblitz, it does not work as expected (click the button -> change the color mode).

It seems that it just simply change the class attribute of html component.

Digging into the source code, the useColorMode funciton will append styling props to style tag. However, no style tag is changed.

Just tested on Firefox and Edge.

[VividLemon]

Ty antfu