Data load fails on initial load but works on subsequent loads - vue.js

Question

<script>
const Detail = Vue.component('Detail', {
props: ['id'],
template:`
<div>
Pages: {{page}}
<p><b>ID:</b> {{ id }}</p>
<h1>{{page.title}}</h1>
<div v-if="page.content" v-html="page.content"></div>
</div>`,
data: function() {
return {
page : {}
};
},
created () {
console.log("Initial load with: " + this.id);
this.fetchData(); // this does not
},
watch: {
'$route': 'fetchData' // this works
},
methods: {
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
data = documentSnapshot.data(); // I think is is what falls apart
});
});
this.page = data;
console.log(JSON.stringify(this.page));
}
}
}); // end component
Console results
Update
I added the following code
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
console.log(JSON.stringify(documentSnapshot.data()));
data = documentSnapshot.data();
});
});
this.page = data;
And it show the JSON I am expecting in the console, but it does not change the UI. It still gives the data not defined error.
Update 2
fetchData () {
console.log("Getting content for: " + this.id);
let data = null;
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
data = documentSnapshot.data();
});
});
this.page = data;
console.log(JSON.stringify(this.page));
}
Now gets. It failing on initial load and follow up loads too.

Answer 1

EDIT
Your problem is with asynchronous loading. You're making an async call to db.collection() but updating your this.page in viewModel after making db.collection() call. So this is why your this.page is not ending up with the data you're desiring to be updated with. Try this & I think it'll work:
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(querySnapshot => {
querySnapshot.forEach(documentSnapshot => {
this.page = documentSnapshot.data(); //this.page will hold last documentSnapshot data
});
});
}
}

Answer 2

It looks like a const is what was needed needed.
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
const {title, content} = doc.data();
this.title = title;
this.content = content;
});
});
console.log(this.title);
}