Help me out sir @jeffreyway , when I try to use a filter in completed items clicking on the checkbox it doesn't works for me, my code

 <div id="app">
       <section  class="flex justify-center mt-32 ">
            <ul>
                <h2 class="font-bold mb-2">In Progress</h2>
                <li v-for="assignment in assignments">
                    <label>
                        {{ assignment.name }} 
                        <input type="checkbox" v-bind="assignment.complete">
                    </label>
                    
                </li>
            </ul>
       </section>

       <section  class="flex justify-center mt-8 h-full">
        <ul>
            <h2 class="font-bold mb-2">Completed</h2>
            <li v-for="assignment in assignments.filter(a => a.complete)">
                <label for="name">
                    {{ assignment.name }} 
                </label>
                <input type="checkbox" v-bind="assignment.complete">
            </li>
        </ul>
   </section>

    </div>
   


    <script>

        Vue.createApp({
        data() {
            return {
                assignments : [
                    {name : 'Finshed Projects', complete : false},
                    {name : 'Read Chapter ', complete : false},
                    {name : 'Turn in homework', complete : false},

                ]

            };
        }
        }).mount('#app')
        </script>

Lists, Conditionals, and Computed Properties