[2342] Unable to update CSS variable with document.documentElement.style.setProperty

In nuxt.config.js

module.exports = {
	/*
	** other things
	*/
        css: [
                '@/assets/css/global.css
        ]
}

In global.css

:root {
	--color: green;
}
.color {
	color: var(--color);
}

In /pages/dummy.vue

<template>
	<section>
		<p class="color">DUMMY</p>
	</section>
</template>

<script>
export default {
	mounted () {
		this.$nextTick(() => {
			document.documentElement.style.setProperty('--color', 'blue')
		})
	}
}
</script>

Expect text to be blue, but it is green

In dev tool: