title: Vue.js - Template with parent scope not updating
body: <p>I created a component for displaying some information in a nice looking way. This component is just a wrapper for the content, which is rendered inside the parent component. The parent component implements the child component this way:</p>
  
  <pre><code>    &lt;my-component v-for="item in items" :key="item.id"&gt;
          &lt;template slot="header"&gt;
              {{ item.title }}
          &lt;/template&gt;
          &lt;template slot="meta"&gt;
              &lt;div&gt;
                  &lt;template v-if="typeof item.additionalData != 'undefined'"&gt;
                      {{ item.additionalData.text }}
                  &lt;/template&gt;
              &lt;/div&gt;
          &lt;/template&gt;
      &lt;/my-component&gt;
  </code></pre>
  
  <p>Its working fine, until I want to change the data. <strong>items</strong> is a variable in the parent component and at render time, the data is parsed in the right way. When I change something inside of <strong>items</strong> after rendering, the child component doesn't recognize it. The reason is because the item.additionalData is added through an AJAX call after the component was already rendered.</p>
  
  <p>The docs say</p>
  
  <blockquote>
    <p>Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.</p>
  </blockquote>
  
  <p>but it seems like this is only true at render time.</p>
  
  <p>Am I not able to use my component this way or is there a solution for that?</p>