useScriptTag child component unload removes parent component tag when same src.

[shtse8]

Describe the bug

load get the existing element

vueuse/packages/core/useScriptTag/index.ts

Line 101 in 8b21ca2

let el = document.querySelector<HTMLScriptElement>(`script[src="${src}"]`)

unload deletes the element

vueuse/packages/core/useScriptTag/index.ts

Lines 174 to 176 in 8b21ca2

	const el = document.querySelector<HTMLScriptElement>(`script[src="${src}"]`)
	if (el)
	document.head.removeChild(el)

If there is two component using the same script, the child component will remove the parent script.
if the component is self referencing, on child component unmounted, the parent script will be removed.

It can be addressed by managing a list of usages, the last unmounted removes the tag.

Reproduction

as above.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Xeon(R) CPU @ 2.20GHz
    Memory: 1.58 GB / 3.83 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.1 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Firefox: 103.0
  npmPackages:
    @vueuse/components: ^9.0.2 => 9.0.2
    @vueuse/core: ^9.0.2 => 9.0.2
    @vueuse/motion: ^2.0.0-beta.12 => 2.0.0-beta.12
    @vueuse/nuxt: ^9.0.2 => 9.0.2

Used Package Manager

yarn

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.

[antfu]

I general I think this is something you should avoid doing. Consider wrapping it with https://vueuse.org/shared/createSharedComposable/

[shtse8]

I think it's hard to avoid. For example, consider making a useFacebookSdk componsable which has useScriptTag inside
App.vue uses logPageView()
and there is a component like Sharer.vue also use useFacebookSdk, send(). They are using the same script tag.
but Sharer.vue may unload the tag when dispose.
I will try to use createdSharedComponsable. Thanks.

[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.