I use nuxt with nuxt content (https://content.nuxt.com/). I have a component that needs to refetch some content while watching content ids.

 const props = defineProps({
  contentId: {
    type: String,
    required: true,
  },
})

const id = ref(null)

watch(
  () => props.contentId,
  (newId) => {
    console.log('newId: ', newId)
    id.value = newId
  },
)

const { refresh } = await useFetch(
  () =>
    queryCollection('popups')
      .where('stem', '=', `popups/en/${id.value}`)
      .first(),
  {
    watch: [id],
    onResponse({ response }) {
      console.log('response: ', response)
    },
  },
)
 

====Edit:=====

<script setup>
const { locale } = useI18n()

const props = defineProps({
  contentId: {
    type: String,
    required: true,
  },
})
 

const popupContent = ref(null)

watch(
  () => props.contentId,
  (newId) => {
    fetchContent(newId)
  },
)

const fetchContent = async (id) => {
  if (!id) return

  console.log('id: ', id)

  const { data } = await useAsyncData(() =>
    queryCollection('popups')
      .where('stem', '=', `popups/${locale.value}/${id}`)
      .first(),
  )
  if (data?.value) {
    popupContent.value = data?.value
  } else {
    console.error('No popup content found for ID: ', id)
  }
}

 

onMounted(() => {
  fetchContent(props.contentId.value)
})
</script>
 

I use Nuxt with Nuxt Content (https://content.nuxt.com/). I have a component that needs to refetch some content while watching content ids.

const props = defineProps({
  contentId: {
    type: String,
    required: true,
  },
})

const id = ref(null)

watch(
  () => props.contentId,
  (newId) => {
    console.log('newId: ', newId)
    id.value = newId
  },
)

const { refresh } = await useFetch(
  () =>
    queryCollection('popups')
      .where('stem', '=', `popups/en/${id.value}`)
      .first(),
  {
    watch: [id],
    onResponse({ response }) {
      console.log('response: ', response)
    },
  },
)

Edit

<script setup> 

const { locale } = useI18n()

const props = defineProps({
  contentId: {
    type: String,
    required: true,
  },
})

const popupContent = ref(null)

watch(
  () => props.contentId,
  (newId) => {
    fetchContent(newId)
  },
)

const fetchContent = async (id) => {
  if (!id) return

  console.log('id: ', id)

  const { data } = await useAsyncData(() =>
    queryCollection('popups')
      .where('stem', '=', `popups/${locale.value}/${id}`)
      .first(),
  )
  if (data?.value) {
    popupContent.value = data?.value
  } else {
    console.error('No popup content found for ID: ', id)
  }
}

onMounted(() => {
  fetchContent(props.contentId.value)
})
</script>

====Edit:=====

And here is also my currently working solution that gives me that warning to use $fetch instead:

[nuxt] [useAsyncData] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching

<script setup>
const { locale } = useI18n()

const props = defineProps({
  contentId: {
    type: String,
    required: true,
  },
})


const popupContent = ref(null)

watch(
  () => props.contentId,
  (newId) => {
    fetchContent(newId)
  },
)

const fetchContent = async (id) => {
  if (!id) return

  console.log('id: ', id)

  const { data } = await useAsyncData(() =>
    queryCollection('popups')
      .where('stem', '=', `popups/${locale.value}/${id}`)
      .first(),
  )
  if (data?.value) {
    popupContent.value = data?.value
  } else {
    console.error('No popup content found for ID: ', id)
  }
}



onMounted(() => {
  fetchContent(props.contentId.value)
})
</script>