Infinit loop with axios call - node.js

Question

I have a problem to loading data with API call with axios, I have an infinit loop when the method loadTasks() is called.
I want to load todo list, and load associated tasks inside. Maybe I'm using the wrong way.
Here my template with Todo liste v-for loop and inside an another v-loop lo display Task list associated, loaded with loadTasks(list.id).
<template >
<div class="todo-list-container">
<div class="list flex flex-col max-w-sm mx-auto">
<hr class="text-gray1 mb-4">
<div v-for="list in allTodoList" :value="list.id" :key="list.id" class="mb-4 px-4 py-2 bg-gray-dark rounded-xl ">
<div class="flex items-center gap-4 mb-4">
<div class="date text-sm text text-left text-gray1">{{ list.order }}</div>
<div class="title font-bold">{{ list.title }}</div>
<div class="ml-auto font-bold text-right">
<button v-if="list.id" #click="this.$store.dispatch('removeTodoList', list.id)">Supprimer</button>
</div>
</div>
<div class="task-container">
{{loadTasks(list.id)}}
<div v-if="loading">loading...</div>
<div v-if="tasks" class="list weekList flex flex-col p-6 max-w-sm mx-auto bg-gray rounded-xl shadow-lg">
<div class="flex flex-row gap-4">
Liste des taches <button #click="displayForm(list.id)" href="#" class="px-2 rounded bg-blue text-white text-sm uppercase right">+</button>
<hr class="text-gray1 mb-4">
</div>
<div v-for="task in tasks" :value="task.id" :key="task.id" class=" mb-4 flex items-center gap-4 flex-row">
<div class="date text-sm text text-left text-gray1">{{ task.position }}</div>
<div class="">
<div class="title font-bold">{{ task.title }}</div>
<div class="date text-sm text text-left text-gray1">Terminé <input type="checkbox" name="finish" id="" :checked="task.finish" ></div>
</div>
<div class="ml-auto font-bold text-right">
<button v-if="task.id" #click="this.$store.dispatch('removeTask', task.id)">Supprimer</button>
</div>
</div>
</div>
</div>
</div>
{{this.$store.state.error}}
<div :class="[ showForm === true ? '' : 'hidden' ] + ' addNewForm'">
<add-task-form :listId="getListId" :showForm="showForm" ></add-task-form>
</div>
</div>
</div>
</template>
Script:
<script>
import addTaskForm from './addTaskForm.vue';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default {
name: 'todoList',
props: ['allTodoList'],
components: {
addTaskForm,
},
data() {
return {
loading: false,
visibleForm: false,
listId: 0,
tasks: [],
};
},
methods: {
displayForm(listId) {
this.listId = listId;
this.visibleForm = !this.visibleForm;
},
async loadTasks(listId) {
try {
if(!listId) { return; }
const tasksList = await axios.get(`/list/${listId}/tasks`);
if (!tasksList.data.tasks || !tasksList.data.tasks.length) {
return;
}
else {
this.tasks = tasksList.data.tasks
}
} catch (error) {
this.$store.dispatch('setError', error);
}
},
cancelForm() {
this.visibleForm = false;
},
},
computed: {
showForm() {
return this.visibleForm;
},
getListId() {
return this.listId;
},
},
}
</script>