Study purpose: Set value true/false by clicking on task - php

Question

Hello i have component Vue, taskdone.php and todo.json.
At moment i can create new tasks from input in vue(frontend), send it on php(backend) and store it in todo.json.
I m trying to add feature that i click on text with the task and the value "completed" change from true to false but dont work.
Can someone explain me the fixes and the reason ?
Thanks for your time
todo.VUE
<script >
import axios from 'axios';
const API_URL = "http://localhost/";
export default {
data(){
return{
task : "",
todoList : []
}
},
methods: {
getAll(){
axios.get(API_URL + "api.php")
.then(res => {
const data = res.data;
this.todoList = data;
});
},
addNew(e){
e.preventDefault();
const params = { params: {
"newTask" : this.task
}};
axios.get(API_URL + "newtask.php",params)
.then(() => {
this.getAll();
})
this.task = "";
},
taskDone(i){
const params = { params: {
"id" : i
}}
axios.get(API_URL + "newtask.php", params)
console.log(i);
}
},
mounted(){
this.getAll();
}
}
</script>
<template>
<form action="" #submit="addNew">
<label for="">Inserisci task: </label>
<input type="text" v-model="task">
<input type="submit" value="Add" >
</form>
<ul>
<li v-for="(task,index) in todoList" :key="index" :class="task.completed == true ? 'taskDone': ''" #click="taskDone(index)">
{{ task.text }}
{{ task.completed }}
</li>
</ul>
</template>
<style scoped>
.taskDone{
text-decoration:line-through;
}
</style>
taskdone.php
<?php
header("Access-Control-Allow-Origin: http://localhost:5173");
header("Access-Control-Allow-Headers: X-Requested-With");
header("Content-Type: application/json");
$id = $_GET["id"];
$jsonTodoList = file_get_contents("todo.json");
$todoList = json_decode($jsonTodoList);
$todoList=$todoList[$id]["completed"] = !$todoList[$id]["completed"];
$jsonTodoList = json_encode($todoList);
file_put_contents("todo.json" , $jsonTodoList);
todo.json
[
{"text":"take a break",
"completed":false
},
{"text":"buy a coffee",
"completed":false
}
]