Nuxt 3 useAsyncData in combination with useSupabaseClient

[philmas]

Version

@nuxtjs/supabase: v.0.3.0
nuxt: 3.1.1 (stable)

Reproduction Link / Steps to reproduce

It's a tedious localhost (dev) setup. I have three containers (supabase docker, postgres database, and a nuxt 3 frontend). For the purpose of this issue I will put the code related to the issue below. When I instead directly use the await client it does seem to work. It might be that the documentation is outdated or that the nuxt module does not work correctly.

import { Task } from "~~/types/tasks";

import { createClient } from "@supabase/supabase-js";

// Create a single supabase client for interacting with your database
const supabase = createClient(
  "http://localhost:8000",
 "xxx"
);

const client = useSupabaseClient<any>();
const user = useSupabaseUser();

const { data: alt_data, error: alt_error } = await supabase
  .from("tasks")
  .select();

/* Here is a different way of using async from nuxt 3 */
const { data: tasks } = await useAsyncData("tasks", async () => {
  const { data } = await client.from("tasks").select();
  return data;
});

/** Load tasks from database using supabase nuxt module */
// const { data, error } = await client.from("tasks").select();

console.log(client);
console.log(supabase);
console.log(tasks);
console.log(alt_data);
// The statement below is true which means that both have the same configuration.
console.log(client.toString() == supabase.toString());

The documentation

What is Expected?

I expect both to return the values.

What is actually happening?

The useAsyncData is unable to retrieve data on reload.