Model URL parameter in VueJS

Continuing from https://stackoverflow.com/a/62859896/4534, I simply want to manipulate a range input element and have the URL update with that value.

// https://github.com/vuejs/vue-router/blob/dev/examples/route-props/Hello.vue
var Hello = Vue.component('Hello', {
  template: `
  <div>
  <h2 class="hello">Hello  </h2>
  <input min=0 max=100 v-model="agility" type="range">
  </div>
  `,
  props: {
    agility: {
      type: Number,
      default: 25
    }
  }
});

const router = new VueRouter({
  // mode: 'history',
  routes: [
    { path: '*', component: Hello, props: true },
    { path: '/:agility', component: Hello, props: true },
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app"></div>

When no value is supplied, I would like the default 25 to be appended to the URL, e.g. https://dabase.com/tips/web/2021/Minimal-VueJS-route-bind/#25

If there is a simpler way to do this without vue-router, I'm all ears!

from Model URL parameter in VueJS