svelte:component not displaying anything

I'm trying to achieve a cde like in this repl:
https://svelte.dev/repl/16b375da9b39417dae837b5006799cb4?version=3.25.0

But I get an empty <div id="#printable"></div> tab on my page

<script>	
	import { onMount } from 'svelte';
	let Home;
	onMount(async () => {
		console.log('loading home ', doc.templateId)
		switch (doc.templateId) {
			case '1':
				Home = await (import( '$lib/template/_artist/Home.svelte')).default;
			case '2':
			case '3':
			default:
				Home = await (import( '$lib/template/_expert/Home.svelte')).default;
		}
		console.log(' home loaded ', doc.templateId)
	});
</script>

<div class='flex flex-col xl:flex-row'>
	<ResumeButtons {data} />

	<div class='flex flex-grow flex-row-reverse mt-4'>
		<!--		//used to balance the growth of the buttons panel-->
	</div>

	<div id='printable' class='flex-none'>
		<svelte:component this={Home} doc={doc} on:modified={documentModified}/>
	</div>
</div>

In my console, I can see the component was loaded:

loading home  2
 home loaded  2

I don't have any idea how I could debug what's going wrong

Just to validate the problem is not from the import path. If I import both templates, then write my code like follows, it works

import Expert from '$lib/template/_expert/Home.svelte';
import Artist from '$lib/template/_artist/Home.svelte';
//...
//then use it directly without await
//...

	switch (doc.templateId) {
		case '1':
			Home = Artist;
			break
		case '2':
		case '3':
		default:
			Home = Expert;
	}

Aren't the parentheses at the imports wrong? Would expect:

(await import('$lib/template/_artist/Home.svelte')).default
// or
await import('$lib/template/_artist/Home.svelte').then(m => m.default)