(Vue) beforeRouteUpdate with async/await? - vue.js

Question

let fetchData = async function() {
return $.get("https://jsonplaceholder.typicode.com/todos/1");
}
Vue.use(VueRouter);
const cComponent = {
data() {
return {
fetchedData: null
}
},
template: `<div>{{$route.params.id+': '}}{{fetchedData}}</div>`,
async beforeRouteEnter(to, from, next) {
let data = await fetchData();
next(vm => vm.fetchedData = data);
},
async beforeRouteUpdate(to, from, next) {
console.log("beforeRouteUpdate");
let data = await fetchData();
this.fetchedData = data;
next();
}
}
const routes = [{
path: "/path/:id",
component: cComponent,
}]
const router = new VueRouter({
mode: "history",
routes,
})
const app = new Vue({
el: "#app",
router,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<script src=" https://unpkg.com/vue-router#3.5.1/dist/vue-router.js"></script>
<div id="app">
<router-link to="/path/1">An URL</router-link>
<router-link to="/path/2">Another one</router-link>
<router-link to="/path/3">And another one</router-link>
<router-view :key="$route.path"></router-view>
</div>
This is the fetch function that retrieves data from a server:
let fetchPage = async (route) => {
return $.get('route');
}
This is my beforeRouteUpdate navigation guard, which fetchedData property of the Vue instance (declared in data option beforehand) does not changes.
async beforeRouteUpdate(to, from, next) {
this.fetchedData = await fetchPage(to.path);
//fetchData is not changed while changing route param
next();
}
The next() callback is activated at the end (URL does change), but this.fetchedData shows null in Vue DevTools (initializing value).
On the other hand, if I do the same thing with async/await in beforeRouteEnter hook, everything works perfectly.
async beforeRouteEnter(to, from, next) {
let data = await fetchPage(to.path);
next(app => app.fetchedData = data); //fetchedData has fetched data as supposed.
},
I tried replacing this with app just like in beforeRouteEnter hook. But there's still no result.
What am I missing? Is this the best practice with guard hooks and how should I use them better? (ignore Exception handling part)
Updated: SPA experience for code snippet on StackOverflow is kinda not perfect so you better try using my provided JS (here). It has the same problem but I simplified it.
Versions
Vue 2.6
VueRouter 3.5