How to access a const inside a function in Vue?

Question

I'm using Laravel/Inertia/Vue3, I get the user object, and then I want to use it inside other function, but its always undefined.

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

const click = () => {
  alert(`${user.name} clicked`);
}
</script>

If I try to access the user object in the HTML vía the handlebars, it works as intended, but I can't use it in the click function. Of course I could assign a const user inside the function with the value usePage().props... but this looks quite ugly, and there must be another way.

Of course, I'm pretty new to Vue.

EDIT #####

I'm refering to this when I say it looks ugly:

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

const click = () => {
    const user = usePage().props.value.user;
    alert(`${user.name} clicked`);
}
</script>

There must be a better and correct way

Answer 1

computed() returns a ref , so your click handler needs to unwrap the value via the ref 's value prop:

<script setup>
const user = computed(() => usePage().props.value.user);

const click = () => {
  //alert(`${user.name} clicked`); ❌
  alert(`${user.value.name} clicked`); ✅
}
</script>

Alternatively, you can avoid the unwrapping with the Reactivity Transform in <script setup> (ie, $computed() in this case):

<script setup>
//const user = computed(() => usePage().props.value.user);
const user = $computed(() => usePage().props.value.user);

const click = () => {
  alert(`${user.name} clicked`);
}
</script>