Upgrading Laravel Project to Jetstream with Inertia.js and Vue 3 Composition API

I used Laravel 8 with the Inertia.js stack. With Laravel 10, I started a new project using the Jetstream package and the Inertia stack. I wanted to update some of my code and continue with Vue 3 Composition API and the script setup. I made some adjustments for the following code:

<template>
    <aside class="flex flex-col bg-white shadow py-6 w-full sm:w-1/3 lg:w-1/4 lg:pl-4">
        <inertia-link :href="link.route" v-for="link in sideBarLinks" :key="link.name" class="flex items-end pl-6 py-2" :class="route().current(link.route) ? 'text-white bg-gray-800 hover:bg-gray-500' : 'text-gray-800 hover:bg-gray-500 hover:text-white'">
            <img :src="link.image" :alt="link.alt" class="h-8 w-8 rounded-full object-cover" v-if="link.image">
            <icon :name="link.icon" class="fill-current w-8 h-8" v-if="link.icon"></icon>
            <span class="ml-2">
                {{ link.name }}
            </span>
        </inertia-link>
    </aside>
</template>

<script>
    export default {
        computed: {
            sideBarLinks() {
                return [
                    { name: `${this.$page.props.user.username}`, image: `${this.$page.props.user.profile_photo_url}`, alt: `${this.$page.props.user.username}`, route: route('profiles.show',`${this.$page.props.user.username}`) },

                    { name: 'Edit Profile', route: route('profile.show'), icon: 'user-edit' },


                ]
            }
        }
    }
</script>

I updated the above code as follows:

<script setup>
import { computed } from 'vue';

const computedSideBarLinks = computed(() => [
  { 
    name: `${$page.props.auth.user.username}`, 
    image: `${$page.props.auth.user.profile_photo_url}`, 
    alt: `${$page.props.auth.user.username}`, 
    route: route('profiles.show', `${$page.props.auth.user.username}`) 
  },
  { 
    name: 'Edit Profile', 
    route: route('profile.show'), 
    icon: 'user-edit' 
  },
]);
</script>

I fixed all the links, and they are working smoothly now. However, the code ${$page.props.auth.user.username} is not functioning.

I tried this as well:

${this.$page.props.user.username}

The result is the same. I cannot retrieve the user's name. It says "Undefined $page."

<script setup>
import { computed } from 'vue'; 

I tried using ref and reactive along with computed, but unfortunately, the result is the same. Is there anything else I need to import?