title: Reactivity not working inside the loop for unknown reason in vuejs
body: <p>I'm struggling to get working the reactivity in vue.js inside the loop. Loop is rendering without any issue, But, when trying to fire an event it updates the content but not visible or render data in the page.</p>
  
  <p>I've used the latest version of vue.js with bootstrap and jquery. I've tried adding <code>key</code> in the loop item but not working. But, when to update any other content by using <code>v-model</code> then it works.</p>
  
  <p><strong>Markup</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app"&gt;
  
    &lt;div class="props"&gt;
      &lt;div class="prop-item" v-for="prop in modules.variations.properties"&gt;
        &lt;p&gt;=== &lt;strong v-text="prop.name"&gt;&lt;/strong&gt; ===&lt;/p&gt;
        &lt;ul&gt;
          &lt;li v-for="value in prop.values" @click="activeProp(prop,value)"&gt;
            &lt;span v-text="value.name"&gt;&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;input type="text" v-model="message"&gt;
  
  &lt;pre&gt;{{ actives }}&lt;/pre&gt;
  &lt;pre&gt;{{ message }}&lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  window.spdata = {
     "variations":{
        "properties":[
           {
              "id":1,
              "name":"Color",
              "values":[
                 {
                    "id":1,
                    "name":"Black",
                 },
                 {
                    "id":2,
                    "name":"Red",
                 },
                 {
                    "id":3,
                    "name":"Blue",
                 }
              ]
           },
           {
              "id":2,
              "name":"Size",
              "values":[
                 {
                    "id":4,
                    "name":"XL",
                 },
                 {
                    "id":5,
                    "name":"XXL",
                 },
                 {
                    "id":6,
                    "name":"XXXL",
                 },
              ]
           },
           {
              "id":3,
              "name": "Type",
              "values":[
                 {
                    "id":8,
                    "name":"Premium",
                 },
                 {
                    "id":9,
                    "name":"Standard",
                 },
                 {
                    "id":10,
                    "name":"Luxary",
                 }
              ]
           }
        ]
     }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>
  new Vue({
    el: "#app",
    data: {
      modules: window.spdata,
      actives: {},
      message: '',
    },
  
    created() {
      this.modules.variations.properties.forEach((prop) =&gt; {
        this.actives[prop.id] = null
      });
    },
  
    methods: {
      activeProp(prop, val) {
        if (this.actives[prop.id] === val.id) {
          this.actives[prop.id] = null;
        } else {
          this.actives[prop.id] = val.id;
        }
      }
    }
  })
  </code></pre>