无法在vue.js中获取array.length属性

Question

在我的data属性中，我有一系列的画廊。数据如下所示：

[
  1 : {
    title: "Demo 1",
    description: "A demo gallery",
    status: 2,
    imageCount: 2
  },
  2 : {
    title: "Demo 2",
    description: "Another demo gallery",
    status: 2,
    imageCount: 3
  }
]

和我的javascript：

$(function(){

    new Vue({

        el: '#galleries',

        data: {
            galleries: $data.galleries
        }
    });

});

在我的模板中，我有：

<div id="galleries">
    <h2>{{ galleries.length }} Galleries</h2>

    <table class="uk-table uk-table-hover uk-table-middle">
        <thead>
            <tr>
                <th class="pk-table-width-minimum"><input type="checkbox"/></th>
                <th class="pk-table-min-width-200">Title</th>
                <th class="pk-table-min-width-200">Description</th>
                <th class="pk-table-min-width-200 uk-text-center">Images</th>
                <th class="pk-table-min-width-200 uk-text-center">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="check-item" v-for="gallery in galleries">
                <td><input type="checkbox" name="id"></td>
                <td><a href="#">{{ gallery.title }}</a></td>
                <td>{{ gallery.description }}</td>
                <td class=" uk-text-center">{{ gallery.imageCount }}</td>
                <td class="uk-text-center">
                    <a href="#" :class="{ 'pk-icon-circle-success' : gallery.status == 2, 'pk-icon-circle-danger' : gallery.status != 2 }"></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

表格呈现完美，但由于某种原因，我无法在length数组上获得galleries属性。它只是什么都没有。所以它好像我有<h2> Galleries</h2>。我已经尝试将其设置为＆＃39;计算＆＃39;价值，但也没有运气。有任何想法吗？感谢。