Framework7 v5 Router Component

page.f7.html

<template>
  <div class="page">
    <p>Value is: {{foo}}</p>
    <p>
      <a href="#" @click="changeValue">Change value</a>
    </p>
    <ul>
      {{each items}}
      <li>{{title}}</li>
      {{/each}}
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        foo: 'bar',
        items: [
          {
            title: 'Item 1'
          },
          {
            title: 'Item 2'
          },
        ]
      }
    },
    methods: {
      changeValue() {
        this.foo = 'bar 2';
        this.$update();
      },
    },
    on: {
      pageInit() {
        this.$app.dialog.alert('page init')
      }
    }
  }
</script>