title: Vue.js render child component with parents data
body: <p>I have a parent component in Vue.js which looks like this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item" v-for="item in items"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;
                  {{ item.title }}
              &lt;/div&gt;
              &lt;div class="col-md-6 text-right"&gt;
                  &lt;a href="#" class="btn btn-primary btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a href="#" class="btn btn-success btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-link"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a href="#" class="btn btn-danger btn-sm"&gt;
                      &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-12"&gt;
                  &lt;preview&gt;&lt;/preview&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The script:</p>
  
  <pre><code>&lt;script&gt;
  
  import Preview from './Preview.vue';
  
  export default {
  
      data() {
          return {
              items: '',
              template: []
          }
      },
  
      created() {
          this.fetchItems();
          this.$on('preview-build', function (child) {
              console.log('new preview: ')
              console.log(child)
          })
      },
  
      components: {
          Preview
      },
  
      methods: {
  
          fetchItems: function () {
              var resource = this.$resource('api/preview');
  
              resource.get({}).then((response) =&gt; {
                  this.items = response.body.item;
              }, (response) =&gt; {
                  console.log('Error fetching tasks');
              }).bind(this);
          },
  
      }
  
   }
   &lt;/script&gt;
  </code></pre>
  
  <p>The child component "preview" has a template-like structure, for example <code>{{ item.title }}</code> again. The preview is loaded correct but it's not rendered.</p>
  
  <p>I really do not know if it is possible in Vue 2.0 but hopefully someone had the same problem and can help me here.</p>
  
  <p>EDIT (thanks Patrick):</p>
  
  <pre><code>&lt;template&gt;
     &lt;textarea rows="20" class="form-control"&gt;
       {{ template.content }}
     &lt;/textarea&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
  
          data() {
              return {
                  template: [],
              }
          },
  
          created() {
              this.fetchTemplate();
          },
  
          methods: {
  
              fetchTemplate: function () {
                  var resource = this.$resource('api/preview');
  
                  resource.get({}).then((response) =&gt; {
                      this.template = response.body.template;
                  }, (response) =&gt; {
                      console.log('Error fetching template');
                  }).bind(this);
              },
  
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the Preview.vue content which is similar to the Item.vue content.
  As a little explanation:</p>
  
  <p>The template data comes from an database as predefined html content including the <code>{{ item.title }}</code> and some other placeholder. I want this to be rendered with the specific stuff coming from the item.</p>