Vue JS – Todo List

I am having trouble creating a todo list with vue.js

Here is the list:

HTML:

<div id="aufgabenApp">
<article class="inhalt">
 <h2>To-do-List</h2>
<p>
<label for="neueAufgabe">Tasks</label>
<input type="text" id="neueAufgabe" v-model="neueAufgabe"> <button class="hinzu" @click="aufgabeHinzu">hinzufügen</button>
</p>

    
<h2>All Tasks</h2>
<ul>
 <li v-for="(aufgabe, index) in aufgaben" :class="{
 'abgeschlossen' : aufgabe.fertig}">
<p>{{aufgabe.beschreibung}}</p>
<button class="erledigtWechseln" @click="erledigtWechseln(index)">&#10003;</button>
<button class="loeschen" @click="loeschen(index)">x</button>
</li> </ul>




<h2>To Do</h2>
<ul>
<li v-for="aufgabe in nichterledigt">{{ aufgabe.beschreibung }}</li>
</ul>
<h2>Already done</h2>
<ul>
<li v-for="aufgabe in erledigt">{{ aufgabe.beschreibung }}</li> </ul>
</div>

JS Code:

<script>
const app = {
  data() {
   return {
    neueAufgabe:"",
      aufgaben: [
       { beschreibung: "Get up", fertig: false },
       { beschreibung: "Sport", fertig: false },
       { beschreibung: "Meditation", fertig: false },
       { beschreibung: "Mails", fertig: false },
       { beschreibung: "Backup", fertig: false },
       { beschreibung: "clean up", fertig: false },
],
neueAufgabe: ''
};
}, 

methods: {
  aufgabeHinzu() {
this.aufgaben.push({beschreibung: this.neueAufgabe, fertig: false});
this.neueAufgabe = '';
  },
  loeschen(index) {
   this.aufgaben.splice(index, 1);
  },
  
    erledigtWechseln(index) {
    this.aufgaben[index].fertig = this.aufgaben[index].fertig ? false : true;
} 
},


computed: {
    erledigt() {
return this.aufgaben.filter(aufgabe => aufgabe.fertig); },
nichterledigt() {
return this.aufgaben.filter(aufgabe => !aufgabe.fertig);
}, 
},

};
Vue.createApp(app).mount("#aufgabenApp");
</script>

</article>

What I am trying to achieve is that the number of already completed and uncompleted tasks

to be shown besides the h2-Headings in this part:

<h2>To Do</h2>
<ul>
<li v-for="aufgabe in nichterledigt">{{ aufgabe.beschreibung }}</li>
</ul>
<h2>Already done</h2>
<ul>
<li v-for="aufgabe in erledigt">{{ aufgabe.beschreibung }}</li> </ul>
</div>

How can I exactly achieve this with “computed properties” and “length” ?

Thanks so much!