Passing an object or parameter with @click

I created a list of div's where each has a @click

        <div class="md:grid-cols-2 lg:grid-cols-1 col-gap-2 md:col-gap-8 md:row-gap-10" v-for="c in 4">
            <Course @click="$router.push('/detail')"
                    title="The Course"
                    description="A Course"
                    lessons="1"
                    length="1 hr"
            />
        </div>

The v-for will be a list of objects, but for now an index is enough. I want to pass an index into the router. I am not sure if this is the best way to do this but the <Course> is more of less a div button that when clicked goes to /detail. Which has

<template>
    Course Details {{ props.id }}
</template>

<script setup lang="ts">

const props = defineProps(
    [
        'id',
    ]
)

</script>

I would create a Course component, that you call from the parent (see CourseList below) and pass in a course object. In the Course component you can handle the click event to call the router and pass the id as a param.

Something like this:

Course component:

<script setup>
  import { useRouter } from 'vue-router';
  
  const props = defineProps(['course']);
  const router = useRouter();
  
  const showDetails = () => { 
    router.push({path: '/details', params: {id: props.course.id })
  }
  
</script>

<template>
  <div @click='showDetails' class="course"> 
    Course {{ props.course.title }}
  </div>
</template>

<style>
  .course {
    padding: 1rem 2rem;
    margin: 1rem;
    border: 1px solid gray;
    border-radius: 4px;
  }
</style>

CourseList component:

<script setup>
  import Course from './Course.vue'

const courses = [
  {
    id: 1,
    title: 'one',
    desc: 'First course',
    lessons: 1,
    duration: 1,
  },
   {
    id: 2,
    title: 'two',
    desc: '2nd course',
    lessons: 5,
    duration: 1,
  },
   {
    id: 3,
    title: 'three',
    desc: '3rd course',
    lessons: 4,
    duration: 3,
  },
]  
 
</script>

<template>
  <Course v-for='course in courses' :key="course.id" :course="course">
  </Course>
</template>