title: Issue when using Vuejs with computed filter
body: <p>I am writing a filter application by using Vuejs with checkboxes. It works well when I use single checkbox. However, it removes the results when I check more than than 2 checkboxes. </p>
  
  <p>For example, when I check Green and Red, it should show the Title 1 and Title 2. 
  Or when I check Green, Red, Active, Completed, it should show the Title 1 and Title 2.</p>
  
  <p>You can check my code at: <a href="https://jsfiddle.net/dalenguyen/xLcvdy0n/1/" rel="nofollow noreferrer">https://jsfiddle.net/dalenguyen/xLcvdy0n/1/</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="box box-info"&gt;
              &lt;div class="box-header with-border"&gt;
                  &lt;h3 class="box-title"&gt;Filter by&lt;/h3&gt;
              &lt;/div&gt;
              &lt;!-- /.box-header --&gt;
              &lt;!-- form start --&gt;
                  &lt;div class="box-body"&gt;
                      &lt;div class="box box-success box-solid"&gt;
                          &lt;div class="box-header with-border"&gt;
                              &lt;h3 class="box-title"&gt;Health&lt;/h3&gt;
                              &lt;!-- /.box-tools --&gt;
                          &lt;/div&gt;
                          &lt;!-- /.box-header --&gt;
                          &lt;div class="box-body" style="display: block;"&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths"&gt;
                                  &lt;label for="green"&gt;Green&lt;/label&gt;
  
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths"&gt;
                                  &lt;label for="red"&gt;Red&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths"&gt;
                                  &lt;label for="yellow"&gt;Yellow&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.box-body --&gt;                      
                      &lt;/div&gt;
  
                      &lt;div class="box box-success box-solid"&gt;
                          &lt;div class="box-header with-border"&gt;
                              &lt;h3 class="box-title"&gt;Status&lt;/h3&gt;
                              &lt;!-- /.box-tools --&gt;
                          &lt;/div&gt;
                          &lt;!-- /.box-header --&gt;
                          &lt;div class="box-body" style="display: block;"&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses"&gt;
                                  &lt;label for="active"&gt;Active&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses"&gt;
                                  &lt;label for="completed"&gt;Completed&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses"&gt;
                                  &lt;label for="cancelled"&gt;Cancelled&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.box-body --&gt;
                      &lt;/div&gt;
                      &lt;button type="button" class="btn btn-block btn-info" v-on:click="resetFilter"&gt;Reset&lt;/button&gt;
  
                  &lt;/div&gt;
                  &lt;!-- /.box-body --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-9 col-sm-8"&gt;
  
          &lt;div class="col-md-4" v-for="project in filteredProjects"&gt;
              &lt;div class="box collapsed-box"&gt;
                  &lt;div class="box-header with-border"&gt;
                      &lt;h4 class="box-title"&gt;&lt;a href=""&gt;{{project['title']}}&lt;/a&gt;&lt;/h4&gt;
                      &lt;!-- /.box-tools --&gt;
                  &lt;/div&gt;
                  &lt;!-- /.box-header --&gt;
                  &lt;div class="box-body"&gt;
                      &lt;table class="table table-striped"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Status&lt;/td&gt;
                              &lt;td&gt;{{project['Status']}}&lt;/td&gt;
                          &lt;/tr&gt;
                           &lt;tr&gt;
                              &lt;td&gt;Health&lt;/td&gt;
                              &lt;td&gt;{{project['Health']}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;!-- /.box-body --&gt;
              &lt;/div&gt;
              &lt;!-- /.box --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Vuejs code:</p>
  
  <pre><code>var app = new Vue({
              el: '.content',
  
              data: {
                  projects: [
                      {
                        "title": "Title 1",
                        "Status": "Active",
                        "Health": "Green",
                      },
                      {
                        "title": "Title 2",
                        "Status": "Completed",
                        "Health": "Red",
                      },
                      {
                        "title": "Title 3",
                        "Status": "Cancelled",
                        "Health": "Yellow",
                      },                    
                    ]                                
                  ,
                  checkedHealths: [],
                  checkedStatuses: []
              },
  
              computed: {
                  filteredProjects: function(){
                      let filterProjects = this.projects;
  
  
                      $.each(this.checkedHealths, function(value, key){                       
                         filterProjects = filterProjects.filter(function(project){                            
                             return project.Health == key;
                         })
                      });
  
                      $.each(this.checkedStatuses, function(value, key){
                          filterProjects = filterProjects.filter(function(project){
                              return project.Status.includes(key);
                          })
                      });
  
                      return filterProjects;
                  }
              },
  
              mounted: function(){
  
                  jQuery('input').iCheck({
                      checkboxClass: 'icheckbox_square-green',
                      radioClass: 'iradio_square-green',
                      increaseArea: '20%' // optional
                  });
  
                  jQuery('input').on('ifChecked', function(e){
  
                      if($(this).attr('name') === "Healths")
                          app.$data.checkedHealths.push($(this).val());
  
                      if($(this).attr('name') === "Statuses")
                          app.$data.checkedStatuses.push($(this).val());
  
                  });
  
                  jQuery('input').on('ifUnchecked', function(e){
  
                      if($(this).attr('name') === "Healths"){
                          let data = app.$data.checkedHealths;
                          app.$data.checkedHealths.splice(data.indexOf($(this).val()),1);
                      }
  
                      if($(this).attr('name') === "Statuses"){
                          let data = app.$data.checkedStatuses;
                          app.$data.checkedStatuses.splice(data.indexOf($(this).val()),1);
                      }
  
                  });
              },
  
              methods: {
                  resetFilter: function(){
                      $('input').iCheck('uncheck');
                  }
              }
          })
  </code></pre>