Standalone component with its own data in Inertia.js?

I am playing with inertia.js and one thing I don’t really understand is how to manage data across components.

For instance, I have a component that shows the number of visits to the page:

<template>
   <div>{{visits}}</div>
</template>
<script setup>
defineProps({visits: Number})
</script>

On the backend I do have this:

Route::get('/visit', function () {
    return inertia('page', { Visits::sum() });
});

However when I load my main page:

<template> 
   <h1>Main</h1>
   <Visits/>
</template>

it would not fetch the visits data. From what I understood, with Inertia the parent component is responsible for loading all child data:

<template> 
   <h1>Main</h1>
   <Visits :boilerplateData="visits"/>
</template>
<script setup>
   defineProps({visits: Number, component1Data: Object, component2Data: Object ...})
</script>

Am I missing something?