I am building a filter with vue js3. I want to push the user selected values to URL and I am watching changes in watch

My checkbox are not working, I have an array and I want to loop all course and make dynamic filter and push its value to URL. My select options are working and it push values to Url, My Url is like this: http://localhost:8080/filter?sort=latest when i choose latest from Url

I have few courses in array. I want to loop it and make a dynamic checkbox and when user checks it, i want to push it value to URL. I need this type of URL: http://localhost:8080/filter?sort=latest&course=php&course=js when user select latest, php and js options

So far I have done

    <h3>Choose multiple</h3>
        <div v-for="(name,index) in courses" :key="index">
            <input type="checkbox" v-model="filter.course" >{{name}}
       
       </div>

  
  
    </form>
</template>

<script>
export default {
    data(){
        return{

            courses:[],

            filter: {
                
                course:''
    
           }
        }
    },

    watch:{
        filter:{
            handler(){
            this.$router.push({
                query:this.filter
            })
            },
            deep:true
        }
    }
   
}
</script>

Only the problem here is i am not able to push checkbox values in the URL

Fixed: This was fixed by changing course:'' to array course:[]