Vuejs. Почему не отображается список?

Есть компонент, который выводит список, полученный от api. При монтировании компонента список отображается, но при получении дочерних элементов , они отображаются только после того, как происходит клик на соседний элемент.

Шаблон:

<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>

Код компонента:

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;
    });
},
});

Как заставить vue отобразить дочерний элемент во время изменения списка?