Framework7 v6 Router Component

page.f7.html

<template>
  <div class="page">
    <p>Value is: ${foo}</p>
    <p>
      <a href="#" @click=${changeValue}>Change value</a>
    </p>
    <ul>
      ${items.map((item) => $h`
      <li>${item.title}</li>
      `)}
    </ul>
  </div>
</template>
<script>
  export default (props, { $f7, $on, $update }) => {
    let foo = 'bar';
    const items = [
      {
        title: 'Item 1'
      },
      {
        title: 'Item 2'
      },
    ];

    const changeValue = () => {
      foo = 'bar 2';
      $update();
    }

    $on('pageInit', () => {
      $f7.dialog.alert('page init')
    })

    return $render;
  }
</script>