Vue.js v-for loop binding items objects in array and update on change

Question

I have a component and am using a v-for loop to loop through and object array at the $root level of my app to populate a list.

In other components in my app I'll EventBus.$emit data to update tables in my database. That means the $root array data updates.

Is there a way to bind or map the v-for list I created to detect and update using the index or another method?

Here is the example loop and example $root data.

I guess I'm hoping there's a way to connect an object in an array by using [index]

<v-list-item-content v-if="this.$root.people">
  <div v-for="(item, index) in this.$root.people" :key="item.id">
    <div>
      <span v-html="this.$root.people[index].value"></span>
    </div>
  </div>
</v-list-item-content>

My array looks like this.

people:Array[2]
 0:Object
  event_id:6
  submission_values:Array[4]
   0:Object
    value:"Danny"
   1:Object
   2:Object
   3:Object

Answer 1

I suppose if people is already reactive then you should look at how you update this array. There are some caveats about updating a reactive array in VueJS, please take a look at the official documentation