data not refreshing

[graceful thorn]

hey, why my carTypes variable is not refreshed when availableOnly ref is changing?

<script setup>
const availableOnly = ref(false);

const {data: {value: {carTypes}}} = await useAsyncData(
    () =>
        $fetch("/api/car-types", {
          query: {
            "start-date": route.query.startDate,
            "end-date": route.query.endDate,
            "available-only": availableOnly.value,
          },
        }),
    {
      watch: [availableOnly],
    },
);
</script>
<template>
// thing that changes availableOnly
{{availableOnly}} // this is changing
{{carTypes === undefined}}} // this returns true
{{carTypes}} // this is not showing
</template>

when i change replace const availableOnly = ref(false); with const availableOnly = ref(true); data is fetched but still doesn't react to ref changes.

thanks for help

idk why it works but i found solution

const {data: carTypes} = await useAsyncData(
    () =>
        $fetch("/api/car-types", {
          query: {
            "start-date": route.query.startDate,
            "end-date": route.query.endDate,
            "available-only": availableOnly.value,
          },
        }),
    {
      watch: [availableOnly],
      transform: (data) => data.carTypes,
    },
);

[zenith stirrup]

Because in your initial example you’re destructuring… losing all reactivity.

It works in your second attempt because you’re not destructuring the proxy.