fix:toggleTodo

todos/src/App.vue

@@ -28,6 +28,10 @@ function editTodo({ item, text }) {
   todoStore.editTodo({ item, text });
 }
 
+function toggleTodo(item) {
+  todoStore.toggle(item);
+}
+
 function changeTabType(type) {
   console.log("App.vue tab change:", type);
   todoStore.setTab(type);
@@ -50,6 +54,7 @@ const showTodos = computed(() => {
     @delTodo="delTodo"
     @move="moveTodo"
     @edit="editTodo"
+    :toggleTodo="toggleTodo"
   />
 
   <TodoFooter

todos/src/components/TodoList.vue

@@ -11,8 +11,12 @@
         @drop="onDrop(index)"
       >
         <div class="tdItem-main">
-          <input type="checkbox" v-model="item.completed" class="toToggle" />
-
+          <input 
+            type="checkbox" 
+            :checked="item.completed" 
+            @change="toggleTodo(item)" 
+            class="toToggle" 
+          />
           <!-- <span class="tdTxt" :class="{ completed: item.completed }"> -->
           <!--   {{ item.txt }} -->
           <!-- </span> -->
@@ -46,7 +50,7 @@
 
 <script>
 export default {
-  props: ["todos"],
+  props: ["todos", "toggleTodo", "delTodo", "editTodo", "moveTodo"],
   data() {
     return {
       editingId: null,

todos/src/stores/todo.js

@@ -65,6 +65,15 @@ export const useTodoStore = defineStore("todoStore", {
       console.log("Current todos:", toRaw(this.todos));
     },
 
+    toggle(item) {
+      const t = this.todos.find(t => t.id === item.id);
+      if (t) {
+        t.completed = !t.completed;
+        this.save();
+        console.log("Toggled:", t);
+      }
+    },
+
     clearCompleted() {
       this.todos = this.todos.filter((t) => !t.completed);
       this.save();