TTL not working in Vue 3 example?

[DarrenXu94]

Hi there,

I've cloned and run the vite-basic example and it works great. I've tried to add some options to the hook:
const { data, error } = useSWRV(endpoint, fetcher, {ttl: 60* 1000 *100, shouldRevalidate: false, revalidateOnFocus: false} );
I've put App.vue in a separate component added a toggle to mount and unmount the component

<button @click="isOpen = !isOpen">Toggle isopen</button> <Test v-if="isOpen" />

When the component is mounted it still makes the network request. Any idea why? TTL should be over an hour and the key hasn't changed?

[Adam DeHaven]

I believe you need to utilize dependent fetching and check if your component has mounted; something like this:

const isOpen = ref(false)

const { data, error } = useSWRV(() => isOpen.value && endpoint, fetcher)