Variable not being set

I'm trying to do something simple but it's not working, I'm trying to take a prop and save it into another variable and use that.

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {Link} from '@inertiajs/inertia-vue3';
import MySelect from "@/Components/MySelect.vue";

const props = defineProps({
    links: {
        type: Array,
        default: []
    },
    perPage: {
        type: Number,
        required: true
    }
})
const emit = defineEmits(['refreshPerPage'])
const perPageVal = ref(props.perPage)

watch(perPageVal,
    () => {
        emit('refreshPerPage', perPageVal)
    }
)

const per_page_select = [
    {value: 5, label: '5'},
    {value: 10, label: '10'},
    {value: 15, label: '15'},
    {value: 25, label: '25'},
    {value: 50, label: '50'},
    {value: 100, label: '100'},
]

const label = computed(() => {
    if ( perPageVal.value !== undefined && (perPageVal.value !== null || perPageVal.value !== '')) {
        return per_page_select.find(option => {
            return option.value === perPageVal.value
        })?.label;
    }
});
</script>

<template>
    <div class="p-4 flex justify-between">
        <div>
            <p>per_page {{perPage}}</p> //correct value
            <p>per_page_val {{perPageVal}}</p> //undefined

            <my-select v-model="perPageVal" :options="per_page_select"></my-select>
        </div>
    </div>
</template>

This is where I'm using the component

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {Menu, MenuButton, MenuItems, MenuItem} from '@headlessui/vue'
import MyButton from "@/Components/MyButton.vue";
import ChevronDownIcon from "@/Shared/Icons/ChevronDownIcon.vue";
import SearchIcon from "@/Shared/Icons/SearchIcon.vue";
import AscIcon from "@/Shared/Icons/AscIcon.vue";
import DescIcon from "@/Shared/Icons/DescIcon.vue";
import MyPagination from "@/Components/MyPagination.vue";

const props = defineProps({
    'filters': Object,
    'table_data': {
        required: true,
        type: Object
    },
    'table_columns': {
        required: true,
        type: Object
    },
    'create_btn': {
        type: String,
        default: 'Nuevo'
    },
    'default_sort_field': {
        type: String,
        default: 'updated_at'
    },
    'default_sort_label': {
        type: String,
        default: 'Fecha Actualizado'
    },
    'default_sort_dir': {
        type: String,
        default: 'asc'
    },
    'default_per_page': {
        type: Number,
        default: 5
    },
    'with_create': {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['refresh', 'create'])

const filtersForm = reactive({
    search: props.filters.search,
    trashed: props.filters.trashed,
    sort_field: props.filters.sort_field,
    sort_dir: props.filters.sort_dir,
    per_page: props.filters.per_page
})

const update_per_page = (e) => {
    filtersForm.per_page = e.value
}

watch(filtersForm, () => {
    emit('refresh', filtersForm)
});

onMounted(() => {
    if (filtersForm.per_page === undefined) {
        filtersForm.per_page = props.default_per_page
    }

    if (has_sort) {
        if (filtersForm.sort_dir === undefined) {
            filtersForm.sort_dir = props.default_sort_dir
        }

        if (filtersForm.sort_field === undefined) {
            filtersForm.sort_field = props.default_sort_field
        }
    }
})
</script>

<template>
    <div class="flex flex-col">
            <div>
                {{filtersForm.per_page}} //correct value at least when displayed
                <my-pagination :per-page="filtersForm.per_page" :links="table_data.links" @refreshPerPage="update_per_page($event)"/>
            </div>
    </div>
</template>

I'm getting this error

Invalid prop: type check failed for prop "perPage". Expected Number with value NaN, got Undefined

What am I doing wrong?