How can I acces css root variables on change in Vue

I have an object called animationInfo and I get the variable circleDuration inside this object from :root. I get this :root variable from a different class with a method called getCircleDurationTime(). I write this value into the input. When I change this input, I send it to a method called setCircleDurationTime(). but after that, when I write the getCircleDurationTime() function in the template, I see that the data does not change. How can I capture when the data here changes?

and my html code

<template>
        <div class="btnContainer">
          <div>
            {{ circleDuration }}
            <div>Circle Duration Time</div>
            <el-input-number v-model="circleDuration " :min="1" @change="setCircleDurationTime" />
          </div>
        </div>
</template>

js code

getCircleDurationTime = function () {
        return getComputedStyle(document.documentElement).getPropertyValue('--variable');
};

setCircleDurationTime = function (_duration) {
        return this.root.style.setProperty('--variable);
};

const circleDuration = getCircleDurationTime()

I can't get the new parameter changed when calling getCircleDurationTime() here. How can I get new value in here?