Describe the bug

There is a modal component that uses v-if to control the rendering of the modal element. The goal is to use useCssVar to add CSS variables to the modal element when the modal opens. However, even though a target is bound, the CSS variable is still being added to document.documentElement instead of the expected element.

After examining the source code, I found that when the target cannot retrieve an element, elRef always returns document.documentElement. Therefore, I would like to suggest adding a check logic for target, such as:

const elRef = computed(() => {
  return target === undefined
    ? window?.document?.documentElement
    : unrefElement(target)
})

Reproduction

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIgAHio2QAfAAdcwqYDAFTsAYBFQHA7Z5PDNPEdPPYXSIh0LV1aS5-w3AAqFWwurlJZqHFmKgA5A6bpy6ogh9nG9qOC389YTAd+4Ohwsp9hszNuy3iIZVABeFSL7RD3R0If2LfyZAtwtgYtHvGdiDdvXYbR7gzkRyjFQAOUSUIwDSRAOAHDhGBUUpiwkCB7mqRNj34WQWSOEBJTqNNcFSKNyBjEA4zABMk14VNsmzFQankaQD0zEA8HkVh6Mo6D4DokAgngPoKAAVlJUk3EqGA0CoYS+IElicyMINNg4gA-FQZgMKSqNSTZaPo7gVTA1SVDADjGj00osLAjiB34GgqCkrMc2TZBIHMdTNJAAAWTYVJAdM8xUL9VFLCsHNfWyqPsxz4k9FzkDwISOBErieIATgE2KRO8aBghCCT6JUPAOOkCgjK8gBZdhIR8hNSk8EsDkCxzbIrKsa2YcRJBkIgaADbBEAABQHQZtGAVjKs8NAVABaRJGweBGFYvzEDG-9SDwKrIOzA57EZUsgA

System Info

System:
  OS: Windows 10 10.0.19045
  CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
  Memory: 9.41 GB / 31.86 GB
Binaries:
  Node: 22.7.0 - F:\Program Files\nodejs\node.EXE
  npm: 10.8.2 - F:\Program Files\nodejs\npm.CMD
  pnpm: 9.12.1 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
  Chrome: 106.0.5249.119
  Edge: Chromium (127.0.2651.74)
  Internet Explorer: 11.0.19041.4355
npmPackages:
  @vueuse/core: ^13.0.0 => 13.0.0

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.