title: axios onUploadProgress + vue?
body: <p>I am trying to build a small <code>ProgressBar</code> component in vue</p>
  <p>My parent component is like this :</p>
  <pre><code>onUploadProgress: function(progressEvent) {
     this.progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
     console.log(this.progress)
     }
  
  &lt;ProgressBar :loading=&quot;loading&quot; :progress=&quot;progress&quot;&gt;&lt;/ProgressBar&gt;
  </code></pre>
  <p>here is my child component:</p>
  <pre><code>&lt;template&gt;
     &lt;div v-if=&quot;loading&quot; class=&quot;progress-bar-wrapper&quot;&gt;
       &lt;div class=&quot;progress-bar&quot; :style=&quot;'width:'+progress+'%'&quot;&gt;{{progress+'%'}}&lt;/div&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;ProgressBar&quot;,
    props: {
      loading: {type:Boolean},
      progress:{type:Number, default:0}
    },
    watch: {
     progress(){
       console.log(this.$props.progress)
     }
    }
   }
  &lt;/script&gt;
  </code></pre>
  <p>I narrowed down the issue and it looks like <code>this.progress</code> in my parent is not being updated properly; if I put a watcher on it, nothing happens:</p>
  <pre><code>watch: {
        progress(){
          console.log(this.progress)
        }
      }
  </code></pre>
  <p>But if I <code>console.log(this.progress)</code> from the callback function I get the expected value...</p>