How to change root css variables in Vue js so that it can be further used in naming tailwind classes? [solved] - vue.js

Question

I have been trying my best to achieve an effect where upon changing the song in a music player, the image and the color scheme changes as well. This was possible when I made the music player using tailwindCSS and Vanilla Javascript. But it has been difficult for me to find a way to achieve the same using Vue.
While using Vanilla JS, I could write this in my JS and HTML file respectively:
function loadsong(music) {
song.innerText = music.song
artist.innerHTML = music.artist
audio.src = music.songUrl
document.documentElement.style.setProperty('--primary-color', music.prColor)
document.documentElement.style.setProperty('--secondary-color', music.secColor)
document.documentElement.style.setProperty('--img-link', music.imageSrc)
}
<style>
:root{
--primary-color: null;
--secondary-color: null;
--img-link: null;
}
</style>
<script>
tailwind.config = {
theme: {
colors: {
primary: 'var(--primary-color)',
secondary: 'var(--secondary-color)',
},
extend: {
backgroundImage: {
'image': 'var(--img-link)'
},
}
},
}
</script>
but when I try doing this in Vue JS:
export default {
name: 'app',
data() {
return {
current: {},
index: 0,
isPlaying: false,
player: new Audio(),
songData: [{ //an object for example
imageSrc: require('./assets/Images/Laufey.png'),
song: 'I Wish You Love',
songUrl: require('./assets/audio/Laufey - I Wish You Love.mp3'),
artist: 'Laufey',
prColor: '#46352E',
secColor: '#CCC6C4',
heart: true
}],
}
},
methods: {
next() {
this.index++
this.current = this.songData[this.index]
}
},
created() {
this.current = this.songData[this.index]
let root = document.documentElement.style
root.setProperty('--primary-color', this.current.prColor)
root.setProperty('--secondary-color', this.current.secColor)
root.setProperty('--img-link', `url(${this.current.imageSrc})`)
this.player.src = this.current.songUrl
console.log(this.current)
}
} <
/script>
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
:root {
--primary-color: null;
--secondary-color: null;
--img-link: null;
}
}
This does not work. I wanted that everytime I change the song, the script reads the new song object (which it does since it grabs other elements) grabs the colors I have defined in the object and pass it on to the root CSS variables. Can someone help me out with this?
Edit: When I used computed method to grab onto the root values and update them, it worked!