vue props data....Can you bring one?

I want to give different colors depending on the % of the 5 batteries. The problem is that the color isn't per-battery, it's spread across the entire battery.

It's probably because bmss data comes in at once. But I don't know how to solve this. It is implemented until the battery changes according to the % in green. all battery image

The problem is color. color battery image

https://codesandbox.io/s/battery-lx3dqz?file=/src/App.vue

data vue

  <template>
      <div id="charging_div" class="frame">
        <div>
          <div id="charging_top_div">
            <div v-for="(bms, index) in bmss" :key="index">
              <div id="charging_left_div">
                <ProgressBattery :bmss="bms" />
                <span>{{ bmss[index].soc }}</span>
              </div>
            </div>
          </div>
          <div class="accumulate">
            <p>{{ time }} kW</p>
            <p>{{ power }} kW</p>
          </div>
          <div id="charging_bottom_div">
            <button id="harging_btn" v-on:click="click_stopCharging_btn">
              stop charging
            </button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import ProgressBattery from "./ProgressBattery.vue";
    
    export default {
      name: "connect",
    
      components: {
        ProgressBattery,
      },
    
      data() {
        return {
          time: "",
          power: "",
          bmss: [
            {
              soc: 5,
            },
            {
              soc: 45,
            },
            {
              soc: 20,
            },
            {
              soc: 100,
            },
            {
              soc: 30,
            },
          ],
        };
      },

fetching vue

 <template>
      <div id="progress-bar-battery">
        <div class="box">
          <span v-if="this.bmss.soc >= 100" class="item" id="v100"></span>
          <span v-if="this.bmss.soc >= 90" class="item" id="v90"></span>
          <span v-if="this.bmss.soc >= 80" class="item" id="v80"></span>
          <span v-if="this.bmss.soc >= 70" class="item" id="v70"></span>
          <span v-if="this.bmss.soc >= 60" class="item" id="v60"></span>
          <span v-if="this.bmss.soc >= 50" class="item" id="v50"></span>
          <span v-if="this.bmss.soc >= 40" class="item" id="v40"></span>
          <span v-if="this.bmss.soc >= 30" class="item" id="v30"></span>
          <span v-if="this.bmss.soc >= 20" class="item" id="v20"></span>
          <span v-if="this.bmss.soc >= 10" class="item" id="v10"></span>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "ProgressBattery",
      props: {
        bmss: {
          type: Object,
          required: true,
          default: function () {
            return [{ soc: 0 }];
          },
        },
      },
      mounted() {
        if (this.bmss.soc >= 61) {
          for (let i = 1; i < 11; i++) {
            document.getElementById(`v${i}0`).style.backgroundColor = "#4ee533";
            console.log(this.bmss.soc + "초록" + `v${i}0`);
          }
        } else if (this.bmss.soc >= 21 && this.bmss.soc <= 60) {
          for (let i = 1; i < 7; i++) {
            document.getElementById(`v${i}0`).style.background = "#FFA500";
            console.log(this.bmss.soc + "주황" + `v${i}0`);
          }
        } else if (this.bmss.soc <= 20 && this.bmss.soc >= 0) {
          for (let i = 1; i < 3; i++) {
            document.getElementById(`v${i}0`).style.background = "#FF0000";
            console.log(this.bmss.soc + "빨강" + `v${i}0`);
          }
        }
        console.log(this.bmss.soc);
      },
    };
    </script>