How to delay v-model sync for a checkbox?

In a Vue app, I am rendering a list of tasks. Each task has a checkbox to mark it as Completed. I also have the option to show/hide completed tasks. When "showcompletedtasks" is false, if I mark an open task as completed, the task dissapears from the list (as intended) but it dissapears instantly, without the user even seing the checkbox check-animation.

I can put a delay on the database update, but it will still dissapear instantly from the DOM because the checkbox is v-modeled to local data (Vuex).

How can I delay the v-model update process? (So that the user sees the task checkbox actually being checked before dissapearing)? I have seen solutions that require using external libraries, but is there a simple solution to do this? Something like v-model.delay?

<template>

 <!--begin::Item-->

 <button @click="$store.state.showcompletedtasks = !$store.state.showcompletedtasks">
   Show completed
 </button>

 <div
   class="d-flex align-items-center mb-8"
   v-for="task in filteredTaskList"
   :key="task.taskid"
 >

   <!--begin::Checkbox-->
   <div class="form-check form-check-custom form-check-solid me-5">
     <input
       class="form-check-input"
       type="checkbox"
       v-model="task.completed"
       @click="handleProfileTaskCheckBox(task)"
     >
   </div>
   <!--end::Checkbox-->
   

   <!--begin::Description-->
   <div class="flex-grow-1">
     <span
       href="#"
       class="text-gray-800 fw-bold fs-6"
     >{{ task.text }}</span>

   </div>
   <!--end::Description-->


 </div>
 <!--end:Item-->

</template>

<script>

export default {
 methods: {
   handleProfileTaskCheckBox(task) {
     //here the task Completed status will be updated in Firebase/Firestore
   },
 },
 computed: {
   filteredTaskList() {
     if (this.$store.state.showcompletedtasks) {
       //return all tasks, completed & uncompleted
       const originalTaskList = this.$store.state.currentProfileTasks;
       return originalTaskList;
     } else if (!this.$store.state.showcompletedtasks) {
       //return only uncompleted tasks
       const originalTaskList = this.$store.state.currentProfileTasks;
       const results = originalTaskList.filter((obj) => {
         return obj.completed === false;
       });
       return results;
     }
   },
 },
};
</script>

<style>
</style>