我的步骤进度栏的第一步无法激活VUEJS

Question

所以我尝试制作一个Step Progress Bar，虽然能够做到，但是却遇到了一个小错误。 我对它进行了编程，以便如果列表对象获得“活动”类，它将使此步骤变为绿色。但是现在我有了问题，如果第一步/列表对象处于活动状态，第二步变为绿色

这里有我的HTMl和CSS：

  <div  class="container">
<div class="progressbar">
  <ul style="list-style-type:none;">
    <li>Video Anschauen</li>
    <li>Fragen beantworten</li>
    <li>Rabatt erhalten</li>
  </ul>
</div>

这是我的CSS：

    .container{
            width: 100%;
            position: absolute;
            z-index: 1;
            margin-left: 20%;
            overflow: auto;
          }
            .progressbar {
            counter-reset: step;
          }
        .progressbar li{
            float: left;
            width: 25%;
            position: relative;
            text-align: center;
          }
          .progressbar li:before{
        content:counter(step);
        counter-increment: step;
        width: 30px;
        height: 30px;
        border: 2px solid black;
        display: block;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        line-height: 27px;
        background: white;
        color: black;
        text-align: center;
        font-weight: bold;
      }
      .progressbar li:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background:black;
    top: 15px;
    left: -50%;
    z-index: -1;
  }
      .progressbar li:first-child:after{
    content: none; 
  }
      .progressbar li.active + li:after{
    background: #50d146;
  }
      .progressbar li.active + li:before{
    border-color: #50d146;
    background: #50d146;
    color: white
  }