2 个数组中的反应对象

Question

我有一个对象数组（数组 1），可以切换到另一个数组（数组 2）。添加后，用户可以选择为每个选项输入文本字段。切换工作正常并且在初始创建时是被动的。但是，如果我的数据已存在于数组 2 中，则该项目不再具有反应性。我做了一个快速的 jsfiddle 来演示：事件 1 和 3 是反应性的，但事件 2 不再是因为它已经存在于 newEvents 数组中。有没有办法将其与原始事件联系起来？    new Vue({      el: "#app",      data: {        events: [          { id: 1, text: "Event 1"},          { id: 2, text: "Event 2"},          { id: 3, text: "Event 3"}        ],        savedEvents: [          { id: 2, text: "Event 2", notes: 'Event Notes'}        ]      },      methods: {        toggleEvent: function(event){          let index = this.savedEvents.findIndex(e => e.id == event.id);          if (index != -1) {            this.savedEvents.splice(index, 1);          } else {            this.savedEvents.push(event);          }        },        inArray: function(id) {          return this.savedEvents.some(obj => obj.id == id);        }      }    })body {  background: #20262E;  padding: 20px;  font-family: Helvetica;}#app {  background: #fff;  border-radius: 4px;  padding: 20px;  transition: all 0.2s;}li {  margin: 8px 0;}h2 {  font-weight: bold;  margin-bottom: 15px;}.btn {  display: inline-block;  padding: 5px;  border: 1px solid #666;  border-radius: 3px;  margin-bottom: 5px;  cursor: pointer;}input[type=text]{  padding: 5px; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <h2>Events:</h2>  <ol>    <li v-for="event in events">      <span class="btn" @click="toggleEvent(event)">        {{ event.text }}      </span>      <input type="text" placeholder="Type your note here..." v-model="event.notes" v-if="inArray(event.id)">    </li>  </ol>  <h2>    Saved Events:  </h2>  <ul>    <li v-for="event in savedEvents">      <strong>{{ event.text }}</strong> {{ event.notes }}    </li>  </ul></div>