我有一個(gè)對(duì)象代表一張單據(jù)

var bill={id:'aaa',store:'bbb'};

完了在new Vue時(shí)賦值給$data：

var vm = new Vue(el:'#billinfo', data: bill});

然后在html中呈現(xiàn)單據(jù)信息：

<div id='billinfo'>
  <p>單號(hào)：{{id}}</p>
  <p>店倉：{{store}}</p>
</div>

在頁面的交互中，bill可能會(huì)變成另一張單據(jù)，而我不想挨個(gè)更新單據(jù)屬性：

bill.id = 'xxx';
bill.store = 'yyy';

我想把bill整個(gè)替換掉，但改變bill的指向顯然不行：

bill = {id:'xxx', store: 'yyy'};

這樣也不行：

vm.$data = {id:'xxx', store: 'yyy'};

固然可以將bill作為$data的某個(gè)子屬性來構(gòu)造vm，例如：

var vm = new Vue({el:xx, data: {bill: bill}});

這樣在bill更新時(shí)便可以像這樣操作：

vm.bill = {id:'xxx', store: 'yyy'};

但問題是使用時(shí)就只能帶上這個(gè)屬性名來使用：

<p>單號(hào)：{{bill.id}}</p>
...

請問怎樣才能讓$data就是實(shí)體本身時(shí)，整個(gè)更新$data？又或者，即便實(shí)體屬于$data的某個(gè)子屬性，也能不帶屬性前綴來使用？