javascript - VueJS not picking up data passed -

i'm new vuejs expect me problem hoping guidance.

i have vue instance person object in data contains predefined data i'm adding object when it's mounted. whatever reason cant understand it's not updating dom data inserted when mounted. i've checked vue app , can confirm person being added on mounted method being added correctly.

    new vue({      el: '#app',      data: {        people: {          dave: {'age': 30, 'plays': 5}        }      },        mounted: function() {        this.people['rob'] = {'age': 22, 'plays': 24};      }      });

<script src="https://unpkg.com/vue"></script>  <div id="app">    <ul>      <li v-for="(person, key) in people">        {{ key }}: {{ person.age }}      </li>    </ul>  </div>

i have feeling either vue gotcha or i'm doing stupid.

this due change detection caveat

instead should doing this:

new vue({ el: '#app', data: {   people: {     dave: {'age': 30, 'plays': 5}   } },  mounted: function() {   this.$set(this.people, 'rob', object.assign({}, { 'age': 22, 'plays': 24}));  } }); 

here fiddle

i recommed go through array change caveats not face problems in future