Working with nested layouts ?

Hello,

I discover Inertia and I attemp to work with nested layouts as described in the documentation on the website.

I have created a Layout.vue view and an Index.vue view to show a list of students.

I want to display and refresh only the details of a student when I click on a student name in the list on the left.

To retieve the details, I use a controller with the show method and I render the Show.vue view.

Here is a part of my code.

Index.vue with the Layout.vue as layout.

<template>
	<div class="left-column">
		// Here is the list 
	</div>
	<div class="right-column">
		<slot>// Here are the details</slot>
	</div>
</template>

Show.vue with the Index.vue as layout.

<template>
	<div>
		// Here are the details
	</div>
</template>
<script>
	import Layout from '../Layout'
	import Index from './Index'
	export default {
  		layout: [Layout, Index],
  		props: {
    	student: Object,
  	},
}
</script>

Is it possible to do that ? Well when I click on a student in the list, the list disappears and the details appears.

I want to have always the list visible and the details change for each student.

For me it doesn't work, but I perhaps have done something wrong.

I you have any idea ;).

Thanks for your help.

Vincent