VueJS adding variable to complex style class

I am trying to add a variable to a particular style, I have tried the traditional method of injecting it through computed but it didn't work.

Here is the html:

            <div class="progress-card">
            <div class="box">
                <div class="percent">
                    <svg class="my_svg">
                        <circle cx="70" cy="70" r="70"></circle>
                        <circle cx="70" cy="70" r="70"></circle>
                    </svg>
                    <div class="num">
                        <h2>90<span>%</span></h2>
                    </div>
                </div>
                <h2 class="text">Html</h2>
            </div>
        </div>

and the style:

<style>
.progress-card:nth-child(2) svg.my_svg circle:nth-child(2)
{
  stroke-dashoffset:calc(440 - (440 * 50) / 100);
  stroke:#00ff43;
}

</style>

This is the only part of the style that needs to be a variable I can't adapt this most likely because of ":nth-child" and "calc".

I am supposed to make the value of "50" a variable

This would be easy if I could insert this to style directly but I can't.