0👍
As @MichalLevý correctly pointed out in the comments, it is not possible to do what you want. SCSS is generated on compile time and Vue is executed on runtime. So all combinations must already be defined at compile time.
You basically have two options to solve your problem anyway: Either you generate all possible classes with SCSS (so 100 classes in case you only have integer percentage values), which seems like an unnecessary amount of code to is deliver to each client. Or you just use a dynamic style attribute and bind the percentage value into that attribute with regular Vue.
I would prefer the second approach, because it is cleaner. There is however the caveat that you cannot use CSP in that case without adding unsafe-inline to the style part. There is however still the possibility to then set the style property with JavaScript (without using the style attribute) when the value changes (Vue watcher).
Here is the second solution in its simplest form:
<div :style="{ width: `${percent}%` }" />