title: Vue.js v-for loop binding items objects in array and update on change
body: <p>I have a component and am using a <a href="/questions/tagged/v-for" class="post-tag" title="show questions tagged &#39;v-for&#39;" rel="tag">v-for</a> loop to loop through and object array at the <code>$root</code> level of my app to populate a list.</p>
  <p>In other components in my app I'll <code>EventBus.$emit</code> data to update tables in my database. That means the $root array data updates.</p>
  <p>Is there a way to bind or map the <a href="/questions/tagged/v-for" class="post-tag" title="show questions tagged &#39;v-for&#39;" rel="tag">v-for</a> list I created to detect and update using the index or another method?</p>
  <p>Here is the example loop and example <code>$root</code> data.</p>
  <p>I guess I'm hoping there's a way to connect an object in an array by using <code>[index]</code></p>
  <pre class="lang-js prettyprint-override"><code>&lt;v-list-item-content v-if=&quot;this.$root.people&quot;&gt;
    &lt;div v-for=&quot;(item, index) in this.$root.people&quot; :key=&quot;item.id&quot;&gt;
      &lt;div&gt;
        &lt;span v-html=&quot;this.$root.people[index].value&quot;&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/v-list-item-content&gt;
  </code></pre>
  <p>My array looks like this.</p>
  
  <pre class="lang-typescript prettyprint-override"><code>people:Array[2]
   0:Object
    event_id:6
    submission_values:Array[4]
     0:Object
      value:&quot;Danny&quot;
     1:Object
     2:Object
     3:Object
  </code></pre>