useDrauu with conditionally rendered target svg element loses styling

[haykkh]

Describe the bug

In our app we use useDrauu with a conditionally rendered target svg. When we unmount and then remount our target svg we lose all of the brush options we had defined. Eg in the repro below if you:

1. draw a line
2. swap the brush style
3. draw a line
4. toggle the svg off then on
5. draw again

the line drawn at 5. will not match the styling of the one at 3.

This seems to happen because there is a watcher in useDrauu for the target svg that recreates a drauu instance with the very original options used to initialize useDrauu, not the brush options at the point of the watcher being called
https://github.com/vueuse/vueuse/blob/48f4c6e1dd6c7ce0ce3e2abf0e1bd7c3f0a85123/packages/integrations/useDrauu/index.ts#L105C50-L105C57

We hadn't noticed that we are recreating the drauu instance every time we conditionally render our svg, and in general it makes more sense to switch it from a v-if to a v-show, so we will be using v-show from now on for that. But I still believe this isn't intended behavior

Reproduction

https://stackblitz.com/edit/vitejs-vite-4tl6xx?file=src%2FApp.vue

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 19.05 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 96.0
    Firefox Developer Edition: 117.0
    Safari: 16.5.2
  npmPackages:
    @vueuse/components: 8.2.5 => 8.2.5
    @vueuse/core: 9.12.0 => 9.12.0
    @vueuse/head: 0.7.6 => 0.7.6
    @vueuse/integrations: ^8.2.5 => 8.9.4
    @vueuse/math: 9.11.0 => 9.11.0
    @vueuse/shared: 8.2.5 => 8.2.5
    vue: 3.2.47 => 3.2.47

Used Package Manager

npm

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.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.