Vue3: How to watch/compute/use $page.props with composition api

[colq2]

I am trying to figure out how to watch or compute properties of Inertia.page.props with the composition api within the setup function.

With the options api it was easy:

computed: { 
  successMessage() { return this.$page.props.flash.success }
}

With the options api it looks like this:

const successMessage = computed(() => {
  return Inertia.page.props?.flash?.success
})

// Watcher to show alert
watch([successMessage], () => {
  show.value = true
})

This work when I am using the form helper and posting something and then return to another page.
But it doesn't work when I am using Inertia.post(route).

With "it doesn't work" I mean, that in the page the props are updated fine. But in a component (an alert component) the computed properties a still null.

Does anyone know what I am missing?

[WOSHIZHAZHA120]

You can try watchEffect, Like this.

[colq2]

Thank you!

usePage was the missing piece!

If someone stumbled across the same problem, here is how I solved it now:

const page = usePage()
const successMessage = computed(() => {
  return page.props.value.flash?.success
})

// Watcher to show alert
watch([successMessage], () => {
  show.value = true
})