Vue.js render child component with parents data
<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>