How to set it completed values shown in the Completed section?

@tykus Take a look on it

<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"> //used v-bind but how can i render the in progress data when it set to be completed true 
            </li>

@Shivamyadav use v-model

<input type="checkbox" v-model="assignment.complete"> 

I would also suggest (i) you key the items in the loops

<li v-for="assignment in assignments" :key="assignment.name">

and (ii) use computed properties rather than filtering in the template

@tykus but i don't want to see it untill it completed ? i just want to see the In progress when i checked the it completed and show in the completed section

@Shivamyadav

but i don't want to see it untill it completed

I don't know what you mean TBH... anyway this example (based on your original) would display two lists; the In Progress and Completed based on the state of complete property of each assignment in the original Array:

<template>
<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 in_progress" :key="assignment.name">
        <label>
          {{ assignment.name }}
          <input type="checkbox" v-model="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 completed" :key="assignment.name">
        <label for="name">
          {{ assignment.name }}
        </label>
        <input type="checkbox" v-model="assignment.complete">
      </li>
    </ul>
  </section>
</div>
</template>
<script>
Vue.createApp({
  data() {
    return {
      assignments: [
        { name: "Finshed Projects", complete: false },
        { name: "Read Chapter ", complete: false },
        { name: "Turn in homework", complete: false }
      ]
    };
  },
  computed: {
    in_progress() {
      return this.assignments.filter((a) => !a.complete);
    },
    completed() {
      return this.assignments.filter((a) => a.complete);
    }
  }
}).mount("#app");
</script>