title: Vue.js. Passing dynamically changing data to child component
body: <p>I'm making a progress bar, which should receive progress status from method <em>submitAction</em>, in which <em>value</em> for progress bar constantly updating. Here my code:</p>
  
  <p><strong>1.Parent component</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;progressbar-component :value="progressState"&gt;&lt;/progressbar-component&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import ProgressBar from './Progress.vue'
      export default {
          components: {
              'progressbar-component': ProgressBar
          },
          data () {
              return {
                  ...
                  progress: 0
                  ...
              }
          },
          computed: {
              ...
              progressState () {
                  return this.progress
              }
              ...
          },
          methods: {
              ...
              submitAction: function (event) {
                  ...
                  let percent = 0
                  setInterval(function () {
                      if(someState &gt; 0) {
                          this.progress = percent % 100
                          percent += 10
                      }
                  }, 200)
                  ...
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>2. Child (progress bar) component</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="progress"&gt;
          {{ value }}
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'progressbar-component',
      props: {
          value: {
              type: Number,
              default: 0
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Aim:</strong></p>
  
  <p>Updating <em>value</em> in Progress Bar's component, while setInterval is running.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p><em>value</em> doesn't update in child component.</p>
  
  <p><strong>P.S.</strong></p>
  
  <p>Some parts of initial code are just left out to simplify problem representation:</p>
  
  <ul>
  <li>this.progress value changes correctly in parent, and I can track it</li>
  <li>through debugger progress bar component also works correctly and
  initial value of <em>progress</em> (i.e. 0) passed fine.</li>
  </ul>