'How to show a Supabase table in Vue3

I'm learning Vue and Supabase, and I need to create a ToDo app. I did the auth and I can submit tasks to Supabase but I cannot make Supabase return me the tasks to print them in my component. I'm using Pinia also to store my functions. Please I need help because I don't understand why it's not working bc my class team have same codes.

I have this function in my component:

async function fetchAllTasks() {
  allTasks.value = await storeTasks.fetchTasks().value;
  console.log(allTasks.value);
}
fetchAllTasks();

this function is in my store:

 async fetchTasks() {
      const { data: tasks, error } = await supabase
        .from("tasks")
        .select("*")
        .order("id", { ascending: false });
      this.tasks = tasks;
    },

And this code in my template inside a table to show the tasks:

<tr v-for="task in allTasks" :key="task">


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source