Vuejs basic structure type of props does not pass the Object

Question

Any idea why below worklist to object page navigation does not pass the props? In debug, I can see the row passed to rowData in WorklistPage. But it arrives to the ObjectPage as an empty Object.

<!-- src/views/WorklistPage.vue -->
...
    <ion-content>
        <ion-list>
            <ion-item v-for="(row, index) in tableData" :key="index" @click="showDetails(row)">
                <ion-label>
                    <ion-text>{{ row.name }}</ion-text>
                </ion-label>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-page>
</template>

<script>
import {
...
} from '@ionic/vue';
export default {
    name: "WorklisPage",
    components: {
...
    },
    data() {
        return {
            tableData: [{
                    name: "Row 1",
                    description: "Description 1",
                    value: "Value 1"
                },
                {
                    name: "Row 2",
                    description: "Description 2",
                    value: "Value 2"
                },
                {
                    name: "Row 3",
                    description: "Description 3",
                    value: "Value 3"
                }
            ]
        };
    },
    methods: {
        showDetails(row) {
            this.$router.push({
                name: "ObjectPage",
                params: { rowData: row }
            });
        }
    }
};
</script>

<!-- src/views/ObjectPage.vue -->
...
        <ion-toolbar>
            <ion-title>Details</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item>
                <ion-text>{{ rowData.name }}</ion-text>
            </ion-item>
            <ion-item>
                <ion-label>Description:</ion-label>
                <ion-text>{{ rowData.description }}</ion-text>
            </ion-item>
            <ion-item>
                <ion-label>Value:</ion-label>
                <ion-text>{{ rowData.value }}</ion-text>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-page>
</template>

<script>
import {
...
} from '@ionic/vue';
export default {
    name: "ObjectPage",
    components: {
...
    },
    props: {
        rowData: Object
    }
};
</script>

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import WorklistPage from '../views/WorklistPage.vue';
import ObjectPage from '../views/ObjectPage.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/worklistPage'
  },
  {
    path: '/worklistPage',
    name: 'WorklistPage',
    component: WorklistPage
  },
  {
    path: '/objectPage',
    name: 'ObjectPage',
    component: ObjectPage
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

Thanks in advance!!!!