title: Why does useLazyFetch composable returns null data?
body: <p>I am trying to learn how to use the data fetching composables in Nuxt3. <strong>For some reason, I get a &quot;loading&quot; text in place of where the username should be:</strong></p>
  <p><a href="https://i.stack.imgur.com/bW1MM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bW1MM.png" alt="enter image description here" /></a></p>
  <p>My expected output is supposed to be something like:</p>
  <p><a href="https://i.stack.imgur.com/tn1x5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tn1x5.png" alt="enter image description here" /></a></p>
  <p>Stackblitz demo: <a href="https://stackblitz.com/edit/nuxt-starter-grcyfr?file=components/PostCard.vue" rel="nofollow noreferrer">https://stackblitz.com/edit/nuxt-starter-grcyfr?file=components/PostCard.vue</a></p>
  <p>Here's my composable code:
  <code>useUser</code>:</p>
  <pre><code>export default function (id) {
    const baseURL = 'https://jsonplaceholder.typicode.com';
    const { pending: pendingUsers, data: users } = useLazyFetch(
      `${baseURL}/users`
    );
    const { pending: pendingUser, data: user } = useLazyFetch(
      `${baseURL}/users/${id}`
    );
  
    return {
      pendingUsers,
      users,
      pendingUser,
      user,
    };
  }
  </code></pre>
  <p>And the component where I want to use it is here:
  <code>PostCard.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;article class=&quot;rounded border overflow-hidden&quot;&gt;
      ...snip...
        &lt;footer class=&quot;mt-6 flex items-center&quot;&gt;
          &lt;PostAvatar :post=&quot;post&quot; /&gt;
          &lt;div class=&quot;ml-3&quot;&gt;
            &lt;p class=&quot;text-sm font-medium text-gray-900&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;hover:underline&quot;&gt;
                {{ pendingUser ? 'Loading...' : user.name }} /////&lt;---- HERE!
              &lt;/a&gt;
            &lt;/p&gt;
            &lt;div class=&quot;flex space-x-1 text-sm text-gray-500&quot;&gt;
              &lt;!-- &lt;time :datetime=&quot;post.datetime&quot;&gt;
                {{ post.date }}
              &lt;/time&gt; --&gt;
              mar 4, 2019
              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;middot;&lt;/span&gt;
              &lt;span&gt;misc&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
      ...snip...
    &lt;/article&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  const props = defineProps({
    post: {
      type: Object,
      default: () =&gt; ({}),
    },
  });
  const { pendingUser, user } = useUser(props.post.userId);
  &lt;/script&gt;
  </code></pre>
  <p>Anyone know why the username is not loading? If I <code>console.log(pendingUser.value, user.value)</code> I get <code>true null</code></p>