vue css 引用data 变量

今天用element的进度条组件 想做一个进度条动画 就涉及到把进度条的百分比传到css 里面

   <div class="progress">
      <div class="month">
        <el-progress :percentage="50" :stroke-width="20"  :duration='1' :style="{'--width':'50%'}"/>
      </div>
      <div class="year">
        <el-progress :percentage="80" :stroke-width="20" :duration='1' :style="{'--width':'80%'}"/>
      </div>
    </div>


.progress {
    :deep(.el-progress-bar__outer) {
      background-color: #161616;
      border: 2px solid #48a1fe;
    }
    .month{
      :deep(.el-progress-bar__inner){
         animation: move 1s linear 0s 1;
      }
      
    }
    .year{
      :deep(.el-progress-bar__inner){
         animation: move1 1s linear 0s 1;
      }
    }
    @keyframes move {
      from {
        width: 0;
      }
      to {
        width: var(--width);
      }
    }
     @keyframes move1 {
      from {
        width: 0;
      }
      to {
        width: var(--width);
      }
    }
  }