how to see changes in new data generated in a vue component?

Well I hope to explain, I’m generating this data from a component, when I click the checkbox changes in the generated data are not reflected, but when clicking the button with a data already in the instance changes are made, I appreciate if you explain Why or do they have a solution?

this my code

js

Vue.component('fighters', {
    template: '#fighters-template',
  data() {
    return {
      items: [
        { name: 'Ryu' },
        { name: 'Ken' },
        { name: 'Akuma' }
      ],
      msg: 'hi'
    }
  },
  methods: {
    newData() {
        this.items.forEach(item => {
        item.id = Math.random().toString(36).substr(2, 9);
        item.game = 'Street Figther';
        item.show = false;
      });
      this.items.push()
    },
    greeting() {
        this.msg = 'hola'
    }
  }
});

new Vue({
    el: '#app'
})

html

<main id="app">
  <fighters></fighters>
</main>

<template id="fighters-template">
  <div class="o-container--sm u-my1">
    <ul>
      <li v-for="item in items">
      <input type="checkbox" v-model="item.show">
      {{ item.name }}</li>
    </ul>
    <button class="c-button c-button--primary" @click="newData()">New Data</button>
    <h2>{{ msg }}</h2>
    <button class="c-button c-button--primary" @click="greeting()">Greeting</button>
    <hr>
    <pre>{{ items }}</pre>

  </div>
</template>

this live code https://jsfiddle.net/cqx12a00/1/

Thanks for you help

Answer

You don’t declare the show variables that your checkboxes are bound to, so they are not reactive – Vue is not aware when one is updated.

It should be initialized like so:

  items: [
    { name: 'Ryu', show: false },
    { name: 'Ken', show: false },
    { name: 'Akuma', show: false }
  ]

You might think that newData would fix it, since it assigns a show member to each item, but Vue cannot detect added properties so they’re still not reactive. If you initialized the data as I show above, then the assignment would be reactive.

If you want to add a new reactive property to an object, you should use Vue.set.