[Vapor] useCssVars (style v-bind) doesn't work with vapor

[Ragnar-Oock]

Vue version

3.6.0-alpha.2

Link to minimal reproduction

https://play.vuejs.org/#eNqVU2tr2zAU/SsXbyMuJG7ajn3w0sAe/bCxF10HGxhWxbpO1cqSkGQ3I/i/70q2k8DWQm2wru85ks59bZM3xmRtg0meLFxphfHg0DcGJFPr8yLxrkigZUbbZaEKL2qyPGxBq8+6UR75lMwfqh5/LFZTaBxeYW0k83iJFXRQWV3DhK6ZvKZT6JxSK+dBYuXhPOxJJ3OzmRwFdMC8Nv9ABFaNKr3QCmrdYootKp8DSXF4EeyjHFotOGwDt/ARz4yN63usWCN92t9S+HB71jLZIF10/XwLPbuUgpaf0JnN9cAkLQ8Sf+2JXS9xl5o0PYLz5aiF67Kpwz7GedT6STiPCm06MVoQ33J9rybTGFmvsRujPkjxA4daDNuecu7iuK93qKta+KFescoLLtrl4jh8A+8QUwvn/0gEV2qDPLKJNspZsfJubUkon5VaapvDs7MyvEMiV9pytDPLuGhcDifz+YsBuRfc3+RwSrUePMwZLD1xqdxEHUthmXKVtnUO0Qy60tkJbZtCXMbq9okrvNFOhIbJga2clo3HfVGpWWYroXhK9mFX7PzhZ0hZTFgIfZlMaSqoSSuxzm6dVjQ6FD5AkZS6NkKi/WrCjTQ5eUgM0FMkTEp9/zH6vG1wOvrLGyzv/uO/dZvgK5JvFh3aFotkh3lm1+h7+OL7F9yQvQNrzRtJ7EfAS4yZII097S0VjGQf8KLaD3HYhVpfuYsNtZQbgwpCA7OL/CKhwX73SOh7uWfZy7ivUB1l8XeLNpxJCTzLXmXzGZPmhmWnSfcXxlKa8g==

Steps to reproduce

1. click/touch anywhere in preview to move the small dot to your cursor
2. add vapor to the component's script
3. click/touch again anywhere in the preview

What is expected?

the dot should move to the cursor position to the click/touch location in vapor mode just like in normal mode.

What is actually happening?

1. the dot doesn't move
2. the following warning is printed to the console when the component is mounted :

[Vue warn]: useCssVars is called without current active component instance. 

System Info

Any additional comments?

The issue stems from the fact that getCurrentInstance() returns null in vapor mode, which short-circuits useCssVars to an early returns with warning here :

core/packages/runtime-dom/src/helpers/useCssVars.ts

Lines 25 to 32 in e60edc0

	const instance = getCurrentInstance()
	/* v8 ignore start */
	if (!instance) {
	__DEV__ &&
	warn(`useCssVars is called without current active component instance.`)
	return
	}
	/* v8 ignore stop */

[edison1105]

There is a PR #12621