Count number of todos that are not finished in todo app Vue js

Question

I want to count the number of todos that are not finished 'done = false' yet each todo is an object inside an array, and I want to display it here <p id="todosLeft">{{HERE}}items left</p><!-- Add dynamic number --> here is how the array would look like, I updated the code maybe there is something stopping your methods from working, Note: when I used this <p id="todosLeft">{{todos.value.filter(k => k.done).length}} items left</p><!-- Add dynamic number --> it did not show error but the whole page became white and the like this[![here][1]][1]

<template>
  <section class="header">
  </section>
  <div class="container">

  <div class="title-theme">
    <h1>Todo</h1>
    <input  type="checkbox" id="switch-l" class="themeSwitch">
    <label @click="switchTheme" for="switch-l" id="switch" class="themeSwitch-label"></label>
  </div>
  <div class="todosInput">
    <div id="mark"></div>
    <form  @submit.prevent="addNewTodo" class="form" action="" data-new-todo-form>
      <input v-model="newTodo" name="newTodo" id="todos" data-new-todo-input type="text" placeholder="Create a new todo..." >
    </form>
  </div>
    <div class="myTodos">
   
      <ul id="todo-list">
        <li v-for="(todo, index) in filteredTodos" :key="todo.id" class="todo-item ">
          <input @click="toggleDone(todo)" class="js-tick" id="1610198328386" type="checkbox" :checked = 'todo.done'>
          <span :class="{ done: todo.done }">{{todo.task}}</span>
          <img @click="deleteTodo(index)" class="delete" width="15px" height="15px" src="/images/icon-cross.svg" alt="cross">
         </li>
      </ul>
    </div>
 <div class="controls">
    <p id="todosLeft">{{todos.value.filter(k => k.done).length}} items left</p><!-- Add dynamic number --> 
    <div class="controls-list-div">
      <ul class="controls-list" data-lists>
      <li id="All"><a class="filters"  @click="filter = 'all'" href="#">All</a></li>
      <li id="Active"><a class="filters" @click="filter = 'active'" href="#">Active</a></li>
      <li id="Completed"><a class="filters" @click="filter = 'completed'" href="#">Completed</a></li>
        </ul>
    </div>
   <p class="filters" @click="deleteCompleted" id="Clear-completed">Clear Completed</p> 
   
  </div> 
</div>
  <div class="instruc">
    <p>Drag and drop to reorder list</p>
  </div>   

 
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
</template>
<script>

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);
    const filter = ref('all')

    const addNewTodo = () => {
     if (newTodo.value !== '') {
        todos.value.push({
        done: false,
        task: newTodo.value,
        id: Date.now(),
      });
      saveTodos();
    }
      newTodo.value = ''
    }

      const filteredTodos = computed(() => {
       const filterFn = filter.value === 'active'  ? (item) => !item.done :
       filter.value === 'completed' ? (item) => item.done : () => true;
       return todos.value.filter(filterFn)
     })


     onMounted(() => {
       if (localStorage.getItem('todos')) {
         try {
           todos.value = JSON.parse(localStorage.getItem('todos'));
         } catch(e) {
           localStorage.removeItem('todos')
         }
       }
     })
     
     
/*     const done = todos.value.filter(item => !item.done);
    const notDone = todos.value.filter(item => item.done);
    const numDone = notDone.length */

 




    const toggleDone = (todo) => {
      todo.done = !todo.done
      saveTodos();
    }

    const deleteTodo = (index) => {
      todos.value.splice(index, 1)
      saveTodos();
    }

    const body = document.body
    const theme = localStorage.getItem('theme')
    if (theme) {
        body.classList.add(theme) 
    }
    const switchTheme = () => {
      if(body.classList.contains('light')){
      body.classList.replace('light', 'dark');
      localStorage.setItem('theme', 'dark')
     } else {
       body.classList.replace('dark', 'light');
       localStorage.setItem('theme', 'light')
     }
    }

  

    
     

   
    const deleteCompleted = () => {
      todos.value = todos.value.filter(item => !item.done)
      saveTodos();
    }

    const saveTodos = () => {
      const parsed = JSON.stringify(todos.value);
      localStorage.setItem('todos', parsed);
    }

    return {
    addNewTodo,
    newTodo,
    todos,
    toggleDone,
    deleteTodo,
    switchTheme,
    filteredTodos,
    filter,
    deleteCompleted,
    saveTodos,
/*     done,
    notDone,
    numDone */

  }
  }
  
}
</script>

Example from comment




const todos = [{
    task: 'Go shopping',
    id: Number,
    done: false
  },
  {
    task: 'play football',
    id: Number,
    done: true
  }
]

const stillTodos = todos.filter(({done}) => !done)
console.log(stillTodos.length, stillTodos)





  [1]: https://i.stack.imgur.com/y63Om.png