Error: Missing required param "id" Vue-router router-link

I am using Laravel 8 with Vue 3, vue-router, vue-loader

In router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import CategoryShow from '../components/category/CategoryShow'
import PostShow from '../components/post/PostShow'

const routes = [
    {
        path: '/categories/:id',
        name: 'categories.show',
        component: CategoryShow,
        props: true
    },
    {
        path: '/posts/:id',
        name: 'posts.show',
        component: PostShow,
        props: true
    },
]

export default createRouter({
    history: createWebHistory(),
    routes
})

In post/PostShow.vue

<router-link v-bind:to="{ name: 'categories.show', params: { id: post.category_id } }">
    {{ post.category_name }}
</router-link>

It shows errors:

[Vue warn]: Unhandled error during execution of setup function 
at <RouterLink to= {name: 'categories.show', params: {…}} > 

Uncaught (in promise) Error: Missing required param "id"

But when I add v-if to this router-link tag like this:

<router-link v-if="typeof post.category_id !== 'undefined'" 
             v-bind:to="{ name: 'categories.show', params: { id: post.category_id } }">
    {{ post.category_name }}
</router-link>

It magically works!

Can anyone explain this?