How to add recursive nested components on the fly?

So I have a nested JSON with tasks and children with more tasks and so on. import_data is the nested JSON. I get my top level parent like this:

<Panel :thing="import_data"></Panel>

And then I get all children recursive like so:

<template id="things-panel-template">
<div class="things-panel">
    {{ thing.body }}
    <div class="children" v-if="thing.children">
        <Panel v-for="childPanel in thing.children"
            :thing="childPanel"
        ></Panel>
    </div>
</div>
</template>

Now, when I update my "import_data" and change a tasks body through JS, it gets updated in my recursive vue task tree. Hurray!

However, when adding new children tasks to the "import_data" the new component for that new child is not created automatically... How can I do this?

vuejs / Discussion

How to add recursive nested components on the fly? #503