Would appreciate some pointers regarding data in semi-complex +layout / +page setup (parent/child route)

[oxisto]

So, I am trying to embrace the new +layout and.data functionality, and most of if works quite well, but I am running into a (maybe mental) brick wall concerning the following problem. I have a semi-complex route consisting of /cloud/[...id] which shows an overview over a cloud service and /cloud/[..id]/configuration which can be used to edit its configuration. I use the following files (edited for brevity):

(I am running in a non-SSR context)

cloud/[...id]/+layout.ts (to fetch the cloud service data for the current id)

export async function load({ fetch, params }: LoadEvent) {
    return { service:  await getCloudService(params.id, fetch) }
}

cloud/[...id]/+layout.svelte to render a "top bar" with a breadcrumb and a tab bar

<script lang="ts">
export let data: import('./$types').LayoutData;
</script>
<ServiceTopBar service={data.service} />
<ul class="nav nav-tabs">
<li class="nav-item ps-2">
  <a class="nav-link" class:active={overviewActive} href="/cloud/{data.service.id}">Overview</a>
</li>
<li class="nav-item">
  <a class="nav-link" class:active={overviewActive} href="/cloud/{data.service.id}/configuration">Configuration</a>
</li>
</ul>

cloud/[...id]/+page.svelte renders the cloud service overview

<script lang="ts">
export let data: import('./$types').LayoutData;
</script>
<h2>{data.service.name}</h2>
<p>{data.service.description}</p>

cloud/[...id]/configuration/+page.svelte renders the edit page

<script lang="ts">
export let data: import('./$types').PageData;
async function save(event) {
  data.service = await updateCloudService(data.service);
}
</script>
<FormGroup floating label="Name">
	<Input placeholder="Enter a name" bind:value={data.service.name} />
</FormGroup>
<Button color={'primary'} on:click={save}>Save</Button>

What I want to achieve is that as soon as I click on save, that the name of the cloud service updates accordingly in the UI. However, I cannot get this to work.

Changing the data with bindings on the input field changes the contents of the data on the current (configuration) page, but not the data inside $page.

If then navigate to the overview, it at least changes the contents on $page and the contents that is rendered within cloud/[...id]/+page.svelte updates, but the contents within the cloud/[...id]/+layout.svelte (the top bar) stays the same.

Do I somehow need to trigger the load again? But fetching this from the server would be unnecessary since I already have the recent information on the return of the updateCloudService call. Maybe I need a store to handle this? I would appreciate some points on this, as I am probably doing something fundamentally wrong here.

PS: The whole code is also available here clouditor/clouditor-medina-ui#173

[hartwm]

Perhaps try $: ({service} = data)

[oxisto]

Perhaps try $: ({service} = data)

Doesn't work either. Everything inside the page is updated, but not in the (parent) layout. What does work though is to invalidate the load, but this seems unnecessary, since I am already fetching the new contents as part of the updateCloudService.

Am I running into a bug here?