Javascript Vue.js和细枝奇怪的碰撞

您好，我的symfony 3项目中有以下代码：

细枝模板：

<div id="fileManagerContainer" class="AppContent">

    {% verbatim %}
    <!-- item template -->
    <script type="text/x-template" id="item-template">
        <li>
            <div
                :class="{bold: isFolder}"
                @click="toggle"
                @dblclick="changeType">
                {{model.name}}
                <span v-if="isFolder">{{open ? '-' : '+'}}</span>
            </div>
            <ul v-show="open" v-if="isFolder">
                <item
                        class="item"
                        v-for="model in model.children"
                        :model="model">
                </item>
                <li class="add" @click="addChild">+</li>
            </ul>
        </li>
    </script>
    {% endverbatim %}

    <p>(You can double click on an item to turn it into a folder.)</p>

    <!-- the demo root element -->
    <ul id="demo">
        <item
                class="item"
                :model="treeData">
        </item>
    </ul>

</div>

---

ant它可以在JSFIDLE上工作，但在实际项目中却无能为力。所有脚本都可以完美加载，Vue.js可以工作，但只有这段代码不能。有什么想法吗？

jsfiddle尽可能真实。你说的@gurghet是什么意思？

// demo data
var data = {
    name: 'My Tree',
    children: [
        { name: 'hello' },
        { name: 'wat' },
        {
            name: 'child folder',
            children: [
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                },
                { name: 'hello' },
                { name: 'wat' },
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                }
            ]
        }
    ]
}

// define the item component
Vue.component('item', {
    template: '#item-template',
    props: {
        model: Object
    },
    data: function () {
        return {
            open: false
        }
    },
    computed: {
        isFolder: function () {
            return this.model.children &&
                this.model.children.length
        }
    },
    methods: {
        toggle: function () {
            if (this.isFolder) {
                this.open = !this.open
            }
        },
        changeType: function () {
            if (!this.isFolder) {
                Vue.set(this.model, 'children', [])
                this.addChild()
                this.open = true
            }
        },
        addChild: function () {
            this.model.children.push({
                name: 'new stuff'
            })
        }
    }
})

// boot up the demo
var demo = new Vue({
    delimiters: ['{{', '}}'],
    el: '#demo',
    data: {
        treeData: data
    }

})