F7-svelte ListItem in Acordion problem modifying component's state in click handler

Consider following three simple pages, shown below (App.svelte, home.svelte, about.svelte). After clicking on an “About” menu in a left panel, the link “GoBack” in about.svelte, which is loaded into a #main view, dooes not work at all. However if I disable the line “curSelMenu = pos.id;” in ListItem click handler, everything works without any problems.

Can someone elighten me, what did I do wrongly ? Thank you very much in advance :slight_smile:

App.svelte

<App theme="auto" name="F7Test" id="F7Test" {...f7params}>
  <Panel left cover>
    <View>
      <Page>
        <List accordionList>
          {#each menuTree as mnu, mnuIdx}
          <ListItem accordionItem title="{mnu.title}">
            <AccordionContent>
              {#each mnu.subItems as pos, posIdx}
              <List menuList>
                <ListItem panelClose
                  title="{pos.label}"
                  href="{pos.route}"
                  view="#main"
                  selected={curSelMenu === pos.id}
                  on:click={(e) => {
                    curSelMenu = pos.id;
                  }}
                >
                  <span slot="media">
                    <Icon md="{pos.icon}" aurora="{pos.icon}" ios="{pos.icon}" />
                  </span>
                </ListItem>
              </List>
              {/each}
            </AccordionContent>
          </ListItem>
          {/each}
        </List>
      </Page>
    </View>
  </Panel>

  <!-- Main view -->
  <View main id="main" url="/">
    <Navbar title="Application Title Bar ..."></Navbar>
    <Page></Page>
  </View>
</App>

<style></style>

<script>
  import {
    AccordionContent, App, Icon, List, ListItem, Navbar, Page, Panel, View
  } from 'framework7-svelte';

  import 'framework7-icons';

  import HomePage from './home.svelte';
  import AboutPage from './about.svelte';

  const f7params = {
    routes: [
      { path: '/',       component: HomePage,  },
      { path: '/about/', component: AboutPage, },
    ],
  };

  const menuTree = [
    {
      title    : 'MainMenu Item 1',
      content  : 'Item 1',
      icon     : 'mdi mdi-home',
      itemColor: 'blue',
      disabled : false,

      subItems: [
        { label: 'Home'  , id: 'home'  , icon: 'f7:house_fill'       , route: '/' }   ,
        { label: 'About' , id: 'about' , icon: 'f7:info_circle_fill' , route: '/about/' }   ,
      ],
    },
  ];

  let curSelMenu = '';
</script>

home.svelte

<Page name="home">
  <Block>
    <Button panelOpen="left">Left Panel</Button>
  </Block>
</Page>
<script>
  import { Button, Block, Page } from 'framework7-svelte';
</script>

about.svelte

<Page name="about">
  <Block>
    <Link onClick={() => f7router.back()}>GoBack</Link>
  </Block>
</Page>
<script>
  import { Block, Page, Link  } from 'framework7-svelte';

  export let f7router;
</script>