How to destructure asynchronous data on the Nuxt 3 composition api

I'm having some real issues with the composition API in Nuxt3. I want to destructure an object returned by an asynchronous call to an API (In this example it's the WP api using wpgraphql). In the past I've done this in the options api using the lifecycle hooks like onMount(). I want to destructure the object as it's heavily nested and referencing children makes the template look awful. Here's what I currently have set up - as expected the destructured data won't return anything because the request is asynchronous.

<script setup>
const route = useRoute();
const { data } = await useAsyncGql("getPostList", {
  search: route.query.search,
  category: route.query.category,
  tag: route.query.tag,
});

// Here's where i'd like to deconstruct the object
const {  posts: { edges } } = data; 

</script>

<template>
  <div>
    {{ data }}
  </div>
</template>