当json数据在不刷新的情况下使用vue.js更改时如何更新进度条

data() {
  return {
    progress: 0,  // 进度条的初始值
  }
},

import axios from 'axios';

export default {
  created() {
    axios.get('url/to/json')
      .then(response => {
        // 更新json数据
        this.jsonData = response.data;

        // 更新进度条的方法
        this.updateProgressBar();
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    updateProgressBar() {
      // 根据json数据的进度值更新进度条
      // 假设json数据的进度值存储在this.jsonData.progress中
      this.progress = this.jsonData.progress;
    }
  }
}

<template>
  <div>
    <!-- 进度条 -->
    <div class="progress">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>