useHead is overwriting htmlAttrs styles set in other components

[Richard Cook]

Environment

"@nuxtjs/sanity": "^1.8.1",
    "@pinia/nuxt": "^0.5.1",
    "@sanity/client": "^6.8.5",
    "@sanity/image-url": "^1.0.1",
    "body-scroll-lock": "^4.0.0-beta.0",
    "embla-carousel-class-names": "^7.1.0",
    "embla-carousel-vue": "^7.1.0",
    "gsap": "^3.12.2",
    "nuxt": "^3.8.2",
    "pinia": "^2.1.7",
    "sass": "^1.69.5"

Reproduction

https://stackblitz.com/edit/github-na4bet

You can see a basic repo here with the component Header.vue applying the onMounted change and pages/index.vue applying the useHead change. If I remove the useHead use the onMounted is applied correctly on refresh. Or if I keep it and resize the window the Header.vue change is applied (due to a test with a resize event).

Describe the bug

I am using useHead (via Nuxt3) on a [slug].vue to update a CSS variable, for example:

useHead({
	htmlAttrs: {
		style: `--color-primary:red;--color-secondary:blue;`
	},
})

This was initially fine, I thought, but within a component that is used on that page I am also needing to update a CSS variable, for example:

onMounted(() => {
	document.documentElement.style.setProperty('--header-height', `${header.value.offsetHeight}px`)
})

The issue I've found is that the onMounted property is overwritten by the useHead style addition.

Any thoughts on how I could avoid this?

Additional context

No response

Logs

No response