Nuxt UseAsyncData

up:: Nuxt

<script setup>
const taskFilter = ref("");
const { data, pending, error, refresh } = await useAsyncData(
  "tasks",
  () => api.getTasks({ filter: taskFilter.value }),
  { options: { lazy: true }, watch: [taskFilter] }
);
</script>

This is an example of using UseAsyncData to call an api from a JavaScript SDK. (This example is from Flowist.)

In this example, there is a reactive property taskFilter. It appears in two places:

1. It is passed as in the options object to the api. It sets the filter.
2. It is passed as an argument in the watch: [] array.

Whenever taskFilter changes in value, the useAsyncData function is called again.