vuejs. Why is the list not showing?

Question

Vue.js

There is a component that displays a list received from api. When the component is mounted, the list is displayed, but when getting child elements, they are displayed only after the adjacent element is clicked.
Sample:

<li :class="{active: active}" class="list-item">
    <span v-if="model.child" >+</span><span @click="activeSet">{{ model.name }}</span>
    <ul v-if="model.child && model.child.length">
        <item :model="item" :key="item.id" v-for="(item,index) in model.child"></item>
    </ul>
</li>

Component code:

Vue.component('item',{
props: ['model'],
template : '#item-template',
data: function () {
    return {
        active: false,
    }
},
methods: {
    activeSet: function(){
        var self = this;
        window.Event.$emit('deactive');
        this.active = true;
        axios.get('api.php',{
            params : {
                folder : self.model.path
            }
        }).then(function(response){
            if(response.data.folders && response.data.folders.length)
                self.model.child = response.data.folders;
        });
    }
},
mounted: function(){
    var self = this;
    window.Event.$on('deactive',function(){
        self.active = false;
    });
}
} );

App:

var app = new Vue({
el: '#app',
data: {
    treeData : []
},
mounted: function(){
    var self = this;
    axios.get('api.php',{
        params : {
            folder : '/'
        }
    }).then(function(response){
        self.treeData = response.data.folders;
    });
},
});

How to force vue to render child element while list is changing?

Answer 1

Probably, child is initially absent in model, right? Try
replacing with

self.$set(self.model, 'child', response.data.folders);