Estoy escribiendo una aplicación de filtro usando Vuejs con casillas de verificación. Funciona bien cuando uso una sola casilla de verificación. Sin embargo, elimina los resultados cuando marco más de 2 casillas de verificación.

Por ejemplo, cuando marque Verde y Rojo, debería mostrar el Título 1 y el Título 2. O cuando marque Verde, Rojo, Activo, Completado, debería mostrar el Título 1 y el Título 2.

Puedes consultar mi código en:https://jsfiddle.net/dalenguyen/xLcvdy0n/1/

Código HTML:

<div class="content">
<div class="row">
    <div class="col-md-3 col-sm-4">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Filter by</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
                <div class="box-body">
                    <div class="box box-success box-solid">
                        <div class="box-header with-border">
                            <h3 class="box-title">Health</h3>
                            <!-- /.box-tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body" style="display: block;">
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths">
                                <label for="green">Green</label>

                            </div>
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths">
                                <label for="red">Red</label>
                            </div>
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths">
                                <label for="yellow">Yellow</label>
                            </div>
                        </div>
                        <!-- /.box-body -->                      
                    </div>

                    <div class="box box-success box-solid">
                        <div class="box-header with-border">
                            <h3 class="box-title">Status</h3>
                            <!-- /.box-tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body" style="display: block;">
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses">
                                <label for="active">Active</label>
                            </div>
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses">
                                <label for="completed">Completed</label>
                            </div>
                            <div class="form-group col-md-12">
                                <input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses">
                                <label for="cancelled">Cancelled</label>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <button type="button" class="btn btn-block btn-info" v-on:click="resetFilter">Reset</button>

                </div>
                <!-- /.box-body -->
        </div>
    </div>
    <div class="col-md-9 col-sm-8">

        <div class="col-md-4" v-for="project in filteredProjects">
            <div class="box collapsed-box">
                <div class="box-header with-border">
                    <h4 class="box-title"><a href="">{{project['title']}}</a></h4>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table class="table table-striped">
                        <tr>
                            <td>Status</td>
                            <td>{{project['Status']}}</td>
                        </tr>
                         <tr>
                            <td>Health</td>
                            <td>{{project['Health']}}</td>
                        </tr>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
</div>

</div>

Código Vuejs:

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');
                }
            }
        })