title: VueJS checkbox update
body: <p>I'm a little wired with VueJS states. </p>
  
  <p>This is my simple app :</p>
  
  <pre><code>new Vue({
      el: '#media-app',
      data: {
          activeTypes: [],
          activeCategories: [],
          medias: []
      },
      methods: {
          getFilteredData: function () {
              // some computing needed
              // refresh vue 
              Vue.set(me, "medias", []);
          },
  
          filterMedia: function () {
              console.debug(this.activeCategories);
              console.debug(this.activeTypes);
              this.getFilteredData();
          }
      }
  });
  </code></pre>
  
  <p>And some HTML stuff:</p>
  
  <pre><code>&lt;input type="checkbox" id="i1" value="i1" class="filter categories" v-model="activeCategories" v-on:click="filterMedia()"&gt;
  &lt;label for='i1'&gt;My cat 1&lt;/label&gt;
  &lt;/div&gt;
  @{{ activeCategories }}
  </code></pre>
  
  <p>When I check the checkbox, the template displays @{{ activeCategories }} correctly with "i1". But the console.debug(this.activeCategories) displays an empty array. I have to put that debug into an updated method to get the correct value. But if I do that, I cannot call a method which change the data or I'll get into an infinity loop…</p>
  
  <p>So, where should I call my filterMedia function to be able to access updated values from activeCategories ?</p>
  
  <p>Thanks for your help.</p>