In Vue Props are declared in the component script. They are passed from a parent component down to child component.

Here is an example of a Child Component accepting the value of username being passed from its parent component:

<template>
 <div>
   {{username}}
 </div>
</template>
 
<script>
export default {
 props: ['username']
}
</script>

Here is the Parent Component passing the "username" prop using a static variable:

<child-component-name username='John Smith' />

In many cases the parent component will bind and object making it dynamic. Here is the whole Parent Component Prop passing "username" to child with this example:

<template>
 <div>
   <child-component-name :username="user.username" />
 </div>
</template>
 
<script>
import child-component-name from "@/components/ChildComponent.vue";
 
export default {
 components: {
   child-component-name
 },
 data() {
   return {
     user: {
       username: 'John Smith'
     }
   }
 }
}
</script>

In your example the parent component is used to count the clicks and events then passes the values to the child component like the following:

<child-component-name :clicks="yourClicks" :events="yourEvents" />

In Vue, props (or properties), are the way that we pass data from a parent component down to it's child components.

This is specifically used to share data from its immediate parent to the child.

In youe case, your parent component template will be something like.

<template>
    <div>
        <child-component-name :clicks="myClickObject" :events="myEventsObject">
        </child-component-name>
    </div>
</template>

Where myClickObject and myEventsObject are objects defined in your immediate parent component from which child-component-name has been called.

The props in Vue components always come from the immediate parent component.