Dynamic [slug].svelte page is not updating after 2 navigation

Sorry again !

I have problem when i use a dynamic pages with svelte kit (node-adapter) when i navigate between pages its change the first 2 diffirent pages but others does not change 😦

here the [slug].svelte code

 <script context="module">
	/**
	 * @type {import('@sveltejs/kit').Load}
	 */
	export async function load({ page: { params }, fetch }) {
		const { slug } = params;

		const url = `/club/${slug}.json`;
		const res = await fetch(url);
		const data = await res.json();

		if (res.ok) {
			console.log('Fetch new data', slug);
			return {
				props: {
					data: data
				}
			};
		}
		return {
			status: res.status,
			error: new Error(`Could not load ${url}`)
		};
	}
</script>

<script>
	import Jumbotron from '../../components/Sections/Jumbotron.svelte';
	import Features from '../../components/Sections/Features.svelte';
	import Video from '../../components/Sections/Video.svelte';
	import Partners from '../../components/Sections/Partners.svelte';
	import Cta from '../../components/Button/Cta.svelte';
	import BannerClub from '../../components/Sections/BannerClub.svelte';
	import TeamInfo from '../../components/Sections/TeamInfo.svelte';
	import HowToParticipate from '../../components/Sections/HowToParticipate.svelte';
	import Participate from '../../components/Sections/Participate.svelte';
	import Gifts from '../../components/Sections/Gifts.svelte';
	import KitsGenerator from '../../components/Sections/KitsGenerator.svelte';
	import { onMount } from 'svelte';

	export let data;

	const getColoredTitle = (title) => {
		title = title.split(' ');
		let half = Math.round(title.length / 2);

		return `${title.slice(0, half).join(' ')} <span class='text-orange'>${title
			.slice(half, title.length)
			.join(' ')}</span>`;
	};

	const getLogo = (slug) => {
		return `/static/images/clubs/logo/${slug}.svg`;
	};

	const getHeader = (slug) => {
		return `/static/images/clubs/header/${slug}.jpg`;
	};

	onMount(() => {
		document.title = `${data.club.title} - 5km pour nos clubs`;
	});
</script>

<div class="page-index fill-current">
	<Jumbotron stats={data.stats} logoImg={data.club.slug} backgroundImg={getHeader(data.club.slug)}>
		<div slot="cta">
			<a href="#participate">
				<Cta mode="dark wtext">Je cours pour le {data.club.title}</Cta>
			</a>

			<style>
				.jumbotron .special {
					@apply md:ml-96 md:pl-8 !important;
				}
				.jumbotron .logo svg {
					max-height: 150px;
				}
				.jumbotron .logo {
					@apply text-white fill-current;
				}
			</style>
		</div>
	</Jumbotron>

	<TeamInfo
		coloredtitle={getColoredTitle(data.club.title)}
		logo={getLogo(data.club.slug)}
		info={data.club.page}
	/>
	<Features />
	<Participate slug={data.club.slug} />
	<Video>
		<p slot="title">
			{@html getColoredTitle(data.club.title)}
		</p>

		<p slot="desc">En quelques mots</p>

		<a slot="cta" href="#participate">
			<Cta mode="dark">Je cours pour le {data.club.title}</Cta>
		</a>
	</Video>

	<BannerClub />
	<HowToParticipate />
	<Gifts />
	<KitsGenerator club={data.club.page.shortname} />
	<Partners />
</div>

[shah-mcc]

I am facing the same issue. Say you have a route /blog/[slug].svelte that displays 1 blog article and links to 10 other blog articles (all which use the same route /blog/[slug].svelte). You can navigate 2 times to any other articles but not a 3rd time using the client router. If you manually refresh the browser you can again navigate another 2 times before it stops working again. I hope that clears up the issue. Thanks.

[yassinrais]

@shah-mcc Yes currect !

The solution i found is that you need to do like this

when you have the load data

export let data; 
// and other things 

you will need to do something like

export let data;

let current_data;
$: data,  (()=>{
  // and here you do the update (its like watch in vuejs)
  // document.title = `Page ${data.title}`;
  current_data = data;
})();

this is how i solv this issue for now , but im not sur if this is the right way to do its in svelte