Nuxt: Getting data, useAsync in a hook

post-fetch-hook-useAsync.vue

TEST PAGE
-------------
<template>
  <div>
    <h1>Post</h1>
    <div v-if="post" id="first-post">
      <h3 class="text-lg">{{ post.title }}</h3>
      <p class="text-base">{{ post.body }}</p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api';
import useTest from '@/hooks/useTest';

export default defineComponent({
  setup() {
    const { post } = useTest();
    return { post };
  },
});
</script>

=================
TEST HOOK
=================
import { useAsync, useContext } from '@nuxtjs/composition-api';

export default function useTest() {
  const { $axios } = useContext();
  const post = useAsync(async () => {
    console.log('useAsync in hook');
    const { data } = await $axios.get('https://jsonplaceholder.typicode.com/posts/1');
    return data;
  });
  return { post };
}