vue/test/functional/fixtures/repeat-object.html

<div id="test">
    <ul>
        <li class="primitive" v-repeat="primitive">{{$key}} {{$value}}</li>
    </ul>
    <ul>
        <li class="obj" v-repeat="obj">{{$key}} {{msg}}</li>
    </ul>
    <button id="push" v-on="click:t1">push to primitive</button>
    <button id="pop" v-on="click:t2">pop from primitive</button>
    <button id="delete" v-on="click:t3">delete prop from object</button>
    <button id="add" v-on="click:t4">add prop to object</button>
    <button id="set" v-on="click:t5">Setting the original object</button>
    <p id="primitive">{{primitive}}</p>
    <p id="obj">{{obj}}</p>
</div>

<script src="../../../dist/vue.js"></script>
<script>
var test = new Vue({
    el: '#test',
    data: {
        primitive: {
            a: 1,
            b: 2
        },
        obj: {
            a: { msg: 'hi!' },
            b: { msg: 'ha!' }
        }
    },
    methods: {
        t1: function () {
            this.primitive.$add('c', 3)
        },
        t2: function () {
            this.primitive.$delete('c')
        },
        t3: function () {
            this.obj.$delete('a')
        },
        t4: function () {
            this.obj.$add('c', { msg: 'ho!' })
        },
        t5: function () {
            this.primitive.a = 3
            this.obj.c = { msg: 'hu!' }
        }
    }
})
</script>