useFetch with url function does not re-fetch data

Environment

Nuxt CLI v3.0.0-rc.8 13:40:47 Nuxt project info: 13:40:49

---

• Operating System: Linux
• Node Version: v18.6.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: build, buildModules, runtimeConfig
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@5.3.2

---

Reproduction

components/ProjectName.vue:

<template>
  <span>
  	{{props.projectId}}
  	<span>{{project}}</span>
  </span>
</template>

<script setup>
const props = defineProps({
	projectId: String
})

const projectId = ref(props.projectId)

const { data: project, pending, refresh } = await useFetch(
	() => {  
		const url = '/api/projects/' + projectId.value; 
		console.log(url);
		return url
	}, {
	  headers: useRequestHeaders(['cookie']),
	  watch: [projectId],
	  lazy: false,
	  cache: false
	})

</script>

pages/[projectId].vue

<template>
<ProjectName :projectId=$route.params.projectId />
</template>

Describe the bug

If “projectId” prop of the ProjectName.vue component changes, the useFetch url() generation function is called and writes the new url via console.log(url) to console. However, no new data is fetched from the backend.

Additional context

Might be related to https://github.com/nuxt/framework/issues/6273

Logs

No response

[AndersNielsen85]

@bf You might consider a shorter “workaround” with useFetch. Adding the key made it work in my case at least. 😃

But agreed the documentation says it should refresh using a function

const { data } = await useFetch('/api/projects/' + projectId.value, { key: projectId.value });

[panle666]

@bf您可能会考虑使用 useFetch 使用更短的“解决方法”。 添加密钥使其至少在我的情况下工作。😃

但同意文档说它应该使用函数刷新

const { data } = await useFetch('/api/projects/' + projectId.value, { key: projectId.value });

@bf您可能会考虑使用 useFetch 使用更短的“解决方法”。 添加密钥使其至少在我的情况下工作。😃

但同意文档说它应该使用函数刷新

const { data } = await useFetch('/api/projects/' + projectId.value, { key: projectId.value });

nice