タイトルが長い!
vue.js での props のバインディングでは、下記のURLにある通り、オブジェクトを渡した場合は参照渡しとなるので、結果的に、子で中身を変更すると、親でもそれが反映されてしまいます。
もし、渡される prop がオブジェクトまたは配列ならば、それは参照で渡されることに注意してください。オブジェクトの変更または配列は、使用しているバインディングのタイプに関係なく、子の内部それ自身は、親の状態に影響を与えます。
この挙動が困る場合、下記のような clone フィルタを作り、それを介して prop に渡すことで、one-way バインディングのような挙動にすることができます。
var _ = require('lodash');
Vue.filter('clone', function (value) {
return _.cloneDeep(value);
});
<my-component my-object="{{myObject | clone}}"></my-component>
が、cloneDeep を使う以上、スペックを気にする必要がありそうです。
……どなたか「中身を一個ずつ渡す」以外にいいやり方ご存知でしたら教えて下さい。