title: Nuxt3 useAsyncData not working onMounted lifecycle hook
body: <p>I'm still a bit confused on what I'm doing wrong here. Essentially I have a vue component in which I want to load some data in async after element is mounted.</p>
  <p>I'm using NUXT 3 and composition API.</p>
  <pre><code>&lt;script setup&gt;
  
  let directories = useState('directories', () =&gt; null);
  
  onMounted( async () =&gt; {
  const { data: response } = await useAsyncData('directories', () =&gt; $fetch('/api/s3-get-directories'));
  directories.value = response;
  });
  
  &lt;/script&gt;
  </code></pre>
  <p>It seems like onMounted triggers before render and is not receiving data correctly. If I wrap on mounted into setTimeout and give 100ms delay it works fine.</p>
  <p>I would appreciate an example of how I should load in data without blocking after client is ready. Or any explanation on what I'm doing wrong here.</p>