Vue.js - 我的多手风琴菜单组件无法通过切换标志工作

我正在使用Vue。我MultiAccordion为我的测试用例创建了组件。我想按status[index]标志打开幻灯片。但是这个组件不起作用。为什么这不起作用？

var MultiAccordion = {
    data: function() {
        return {
            items: [
                'cat',
                'dog',
                'bird',
            ],
            status: [],
        };
    },
    created: function() {
        for (let i = 0; i < this.items.length; ++i) {
            this.status.push(false);
        }
    },
    methods: {
        handleToggle: function(index) {
            this.status[index] = !this.status[index];
        },
    },
    template: `
    <ul>
        <li v-for="(val, index) in items">
            <button @click="handleToggle(index)">toggle</button>
            <div v-if="status[index]">
                {{ val }}
            </div>
        </li>
    </ul>
    `,
};