Accessing CSS style with Vue.js

Question

I am trying to make website and I need to get access to my style thorough Vue.

I need to access CSS with Vue because style .skill-bar is background of bar and .skill-bar-fill is green filament which is supposed to have width based on number defined in Vue :

So I mean how can I change style of this .skill-bar-fill anytime I want by just changing number in Vue? How can I change width of .skill-bar-fill separately in every item?

HTML

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill"> {{ programming.item1}} %</div>
</div>

CSS

.skill-bar{
    text-align: center;
    color: $black;
    font-size: 0.75rem;
    height: 1rem;
    background: $bg-light;
    border-radius: 1rem;
}

.skill-bar-fill{
    height: 1rem;
    background: $green;
    border-radius: 1rem;
}

Vue

export default {
        name: 'Items',
        data() {
            return{
                programming: {item1: 95, item2: 90, },

            }

        }
    }

And I am trying

Answer 1

Keep the class skill-bar-fill and use style binding:

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill" :style="{width:programming.item1+'%'}"> {{ programming.item1}} %</div>
</div>

You couldn't modify a property of that class since it's not unique and each item is unique.

Answer 2

This answer is based on original question. Your requirement has been simplified so your solution is fine and below is probably not required

For the first instance, you could use a CSS variable for the width attribute, and programatically change the variable. For subsequence instances, this won't work by itself because they share the CSS so for those you'd need an object style syntax.

Pass a property to the first child so it knows it's the first one and it needs to set the variable

Setting CSS variable in Vue: Add var into css class

For subsequent children use object syntax: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

It's not clear to me why you the width of divs needs to reference the first uncle - what if the second skill is higher than the first? - but the above might be the answer.