Vue tree nested menu

When I call my vue component, it work wrong. It shown menu tree, but not correctly, first of the item show without nested, but other items work fine. Sorry for my english.

I'm use Zurb Foundation.

For example

My vue component

<template>
    <ul class="vertical menu nested" v-f-accordion-menu>
        <li v-for="item in model">
            <a class="category-controls-name" href="#">
                <span>{{ item.name }}</span>
            </a>
            <div class="category-controls">
                <a :href="item.url">Выбрать</a>
            </div>
                <category class="category" :model="item.children" v-if="hasChild(item)"></category>
        </li>
    </ul>
</template>
<script>
    export default {
        props: {
            model: Array | Object
        },

        methods: {
            hasChild: function (item) {
                return item.children &&
                    item.children.length
            }
        }
    }
</script>

My blade view

<div class="medium-12 columns category-search-result">
    <category class="category" :model="categories"></category>
</div>

My directives, if need

Vue.directive('f-accordion-menu', {
    bind: function (el) {
        this.accordion = new Foundation.AccordionMenu($(el))
    }
})