Strange behavior of state

[benny856694]

The simple demo code is here: https://github.com/benny856694/strange

NavLi in Navbar will not be updated, but it will be updated in MyComp.
The gif for the behavior: https://1drv.ms/i/s!Al4RslLhazbZo1PXoccdZ0zKqROo?e=bchtDd

almost identical code:

<Navbar>
	<NavUl>
		<NavLi data="home in navbar" href="/" active={$page.route.id === '/(auth)'}>Home (active:{$page.route.id === '/(auth)'})</NavLi>
		<NavLi data="about in navbar" href="/about" active={$page.route.id === '/(auth)/about'}>About (active:{$page.route.id === '/(auth)/about'})</NavLi>
	</NavUl>
</Navbar>

<MyComp>
	<NavUl>
		<NavLi data="home in mycomp" href="/" active={$page.route.id === '/(auth)'}>home (active:{$page.route.id === '/(auth)'})</NavLi>
		<NavLi data="about in mycomp" href="/about" active={$page.route.id === '/(auth)/about'}>about (active:{$page.route.id === '/(auth)/about'})</NavLi>
	</NavUl>
</MyComp>

NavBar:

  <Frame>
    <slot />
  </Frame>

Frame:

<div>
	<slot />
</div>

MyComp:

<div>
	<slot />
</div>