参考
Vueオブジェクトの値渡し
#オブジェクトを代入する

    <body>
        <div id="app">

            <p>オブジェクト1</p>
            <p>name:{{obj1.name}}</p>
            <p>count:{{obj1.count}}</p>

            <button v-on:click="change1()">変更1</button>

            <p>オブジェクト2</p>
            <p>name:{{obj2.name}}</p>
            <p>count:{{obj2.count}}</p>

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    obj1: {name: 'obj1', count: 1},
                    obj2: {name: 'obj2', count: 1}

                },
                methods: {
                    change1(){
                        this.obj2 = this.obj1;
                        this.obj2.count++;
                    }
                }
            });
        </script>
    </body>

オブジェクト1とオブジェクト2を用意します。
ボタンを押すとchabge1関数が呼び出されます。
オブジェクト1をオブジェクト2に代入した後、オブジェクト2のcountを1増やします。

(変更前)

↓
(変更後)

オブジェクト2は、オブジェクト1と同じようにnameがobj1になり、countは1増えて2になりました。想定どおりです。
しかしオブジェクト1のcountも2になってしまいました。
これは、オブジェクト1をオブジェクト2に参照渡しで代入したためです。
このため、オブジェクト2を変更すると、それに合わせてオブジェクト1まで変更されてしまいました。
#オブジェクトをコピーして代入する

    <body>
        <div id="app">

            <p>オブジェクト1</p>
            <p>name:{{obj1.name}}</p>
            <p>count:{{obj1.count}}</p>

            <button v-on:click="change2()">変更2</button>

            <p>オブジェクト2</p>
            <p>name:{{obj2.name}}</p>
            <p>count:{{obj2.count}}</p>

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    obj1: {name: 'obj1', count: 1},
                    obj2: {name: 'obj2', count: 1}
                },
                methods: {
                    change2(){
                        this.obj2 = Vue.util.extend({}, this.obj1);
                        this.obj2.count++;
                    }
                }
            });
        </script>
    </body>

this.obj2 = Vue.util.extend({}, this.obj1);の部分で、オブジェクト1をコピーして代入しています。

(変更前)

↓
(変更後)

オブジェクト2のcountだけが2になりました。