title: Vue.js - How to render data changes in child component?
body: <p>So I have a parent component <code>Store</code> that has a child component called <code>Order</code>. The data from the parent is passed via <code>props</code> to its child, like so:</p>
  
  <p><strong>parent</strong></p>
  
  <pre><code>&lt;Order :order="order" /&gt;
  </code></pre>
  
  <p><strong>child</strong></p>
  
  <pre><code>props: ['order']
  </code></pre>
  
  <p>I need to use a new data variable in the child component called <code>orderIds</code>, so I declare that:</p>
  
  <p><strong>child</strong></p>
  
  <pre><code>props: ['order'],
  data: () {
    return {
      orderIds: Object.keys(this.order)
    }
  }
  </code></pre>
  
  <p>Then, I render the <code>orderIds</code> in the view:</p>
  
  <pre><code>{{orderIds}}
  </code></pre>
  
  <p>Now, whenever the <code>order</code> data changes in the <strong>parent</strong>, it updates the prop <code>order</code> in the child, but it is not propagated through to <code>orderIds</code>.</p>
  
  <p>How would I update <code>orderIds</code> when something changes in <code>order</code>?</p>