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>