Uncaught (in promise) ReferenceError: $page is not defined

What I want to achieve

I have a project using Laravel + InertiaJS/VueJS 3. In it, there is an edit form that should display the content of $page.props.profile_name if the value is not empty or the string profile_name if the value is non-existent.

The bug message from the browser's console

> Uncaught (in promise) ReferenceError: $page is not defined

When I see this message, the content of my component is not visible in the interface.

My VueJS 3 Code

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" v-model="form.profile_name" />

        <input id="description" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script setup>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';

    const form = useForm({
        profile_name: $page.props.profile_name || 'profile_name',
        description: $page.props.description || 'description',
    });

    function submit() {
        router.post('/members', form);
    }
</script>

How I can solve the issue for now

The code works fine, but with hard-coded content, if I replace the form constant this way. I would prefer to get my content from $page.props.profile_name as soon as $page.props.profile_name is not empty.

const form = useForm({
    profile_name: 'profile_name',
    description: 'description',
});

I originally posted the answer within the question, but it was removed by a proofreader. Credits to yoduh for his answer. And thanks to efecdml for taking part in the discussion.

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" :placeholder="$page.props.profile_name || 'profile_name'" v-model="form.profile_name" />

        <input id="description" :placeholder="$page.props.description || 'description'" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';
    import { usePage } from '@inertiajs/vue3';

    export default {
        name: 'MyComponent',
        setup() {
            const page = usePage();

            const form = useForm({
                profile_name: page.props.profile_name || 'profile_name',
                description: page.props.description || 'description',
            });

            function submit() {
                router.post('/members', form);
            }

            return {
                form,
                submit,
            };
        },
    };
</script>

I know like referencing elements from DOM to setup is not like that in Composition API and didn't get the whole point of this code. Though this is the method comes to my mind right now:

<template>
  <form @submit.prevent="submit">
    <input id="profile_name" v-model="form.profile_name"/>

    <input id="description" v-model="form.description"/>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { router } from '@inertiajs/vue3';
import {ref} from "vue";

const form = ref({
  "profile_name":"",
  "description":""
})

function submit() {
  router.post('/members', form);
}
</script>

I didn't get the submit() method at the moment.