Progress bar with multiple divisions

Hello to the whole stackoverflow community! Unfortunately, I have a problem and I can’t deal with it alone :c . I hope for your understanding and help in calculating this progress bar. How to properly calculate the completion of this progress bar? I am doing it in Vue. P.S already know about the fact that you can’t access the item through querySelector, I will fix that in the future.

enter image description here

<div class="main__position-bar">
            <div class="main__position-bar-junior-minus">
              <p class="main__position">Junior -</p>
              <div class="main__position-progress main__position-progress--beginning">
                <span class="main__position-progress--beginning"></span>
              </div>
              <p class="main__position-number">50</p>
            </div>

            <div class="main__position-bar-junior-plus">
              <p class="main__position">Junior +</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">150</p>
            </div>

            <div class="main__position-bar-middle-minus">
              <p class="main__position">Middle -</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">200</p>
            </div>

            <div class="main__position-bar-middle-plus">
              <p class="main__position">Middle +</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">300</p>
            </div>

            <div class="main__position-bar-senior-minus">
              <p class="main__position">Senior -</p>
              <div class="main__position-progress">
                <span></span>
              </div>
              <p class="main__position-number">350</p>
            </div>

            <div class="main__position-bar-senior-plus">
              <p class="main__position">Senior +</p>
              <div class="main__position-progress main__position-progress--end">
                <span class="main__position-progress--end"></span>
              </div>
            </div>
          </div>

          export default {
           data() {
            return {         
             positionProgressValueOne: 150,
             positionProgressValueTwo: 1,
            }
           },
  methods: {
    positionProgressBar() {
      let positionJuniorMinus = document.querySelector('.main__position-bar-junior-minus .main__position'),
          positionJuniorMinusTime = document.querySelector('.main__position-bar-junior-minus .main__position-number'),
          progressBarJuniorMinus = document.querySelector('.main__position-bar-junior-minus span'),

          positionJuniorPlus = document.querySelector('.main__position-bar-junior-plus .main__position'),
          positionJuniorPlusTime = document.querySelector('.main__position-bar-junior-plus .main__position-number'),
          progressBarJuniorPlus = document.querySelector('.main__position-bar-junior-plus span'),

          percent = 100,
          valueOne = this.positionProgressValueOne,
          valueTwo = this.positionProgressValueTwo,
          calculationOne = valueOne / valueTwo,
          calculationTwo = percent / calculationOne;


      if (this.positionProgressValueOne <= 50) {
        this.userPosition = 'Junior -'

        function calculationProgressBar() {
          positionJuniorMinus.classList.add('main__position--active');
          positionJuniorMinusTime.classList.add('main__position-number--active');
          progressBarJuniorMinus.style.width = `${calculationTwo}%`
        }
      } else if (this.positionProgressValueOne >50 && this.positionProgressValueOne <= 150) {
        this.userPosition = 'Junior +'

        function calculationProgressBar() {
          positionJuniorPlus.classList.add('main__position--active');
          positionJuniorPlusTime.classList.add('main__position-number--active');
          progressBarJuniorMinus.style.width = '100%';
          progressBarJuniorPlus.style.width = `${calculationTwo}%`
        }
      }
    },
  },
   mounted() {
    this. positionProgressBar();
  }
}