Maintain state of filters vue

I am using vue3 and I am pushing filter params to URL. I want to maintain the state of filter even after the page refresh. For single options like dropdown the state of filter remain even after page refresh but for checkbox it won't. If I check some courses checkbox , it push params to URL but when I refresh, the checkbox will remain unchecked. Any help? Here is my code

<template>
    <div>Filters</div>
    <form action="#">
        <div>
            <h3>Choose multiple</h3>
  
     
        </div>
         
        <select   v-model="filter.sort">
            <option value="">Sort by</option>
            <option value="latest">Latest</option>
            <option value="popular">Popular</option>
        </select>
        <select  v-model="filter.limit">
            <option value="">Show</option>
            <option value="55">55</option>
            <option value="70">70</option>
        </select>


    </form>
</template>

<script>
export default {
    data(){
        return{
            
    
            filter: {
                sort:this.$route.query.sort,
                limit:this.$route.query.limit,
               
               
           
           }
        }
    },

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