Async data fetching not updating reactive data property - vue.js

Question

Ok, guys, I´m having a little issue today, all day long, trying to solve, the deal goes like this...
I´m fetching some data from firebase to render on the html template with asynchronous functions
I have a fetchList Method that is like this:
async mounted() {
let ret = await this.fetchJobRequireList()
console.log('fetchjoblist' , ret)
async fetchJobRequireList() {
// debugger
let services = JSON.parse(sessionStorage.getItem('required_services'))
services != null ? this.required_services = services : null
let docs_ = []
let result = []
if (!services) {
// this.required_services = []
// get required services per user id
let collections = this.$options.firebase.functions().httpsCallable('getRequiredServices')
let docs = await this.$options.firebase.firestore().collection('required_services').get()
// console.log('required services docs', docs)
let _ = this
for (let doc of docs.docs) {
result[doc.id] =
await collections({doc_id: doc.id}).then( async r => {
// debugger
let collections_ = r.data.cols
docs_ = []
_.required_services[doc.id] = []
for (let collection of collections_) {
let path = collection._referencePath.segments
// let documents =
let __ = _
await this.$options.firebase.firestore().collection(path[0])
.doc(path[1]).collection(path[2]).get()
.then(async documents => {
// console.log('__documents__', documents)
for (let doc_ of documents.docs) {
doc_ = await documents.docs[0].ref.get()
doc_ = {
id: doc_.id,
path: doc_.ref.path,
data: doc_.data()
}
// debugger
__.required_services[doc.id].push(doc_)
console.log("this?", this.required_services[doc.id], '__??', __.required_services)
docs_.push(doc_)
}
})
}
console.log('__docs__', docs_)
return docs_
}).catch(err => console.error(err))
// console.log('this.required_services', this.required_services)
}
}
// console.log('object entries', Object.entries(result))
// console.log('__this.required_services__', Object.entries(this.required_services))
// sessionStorage.setItem('required_services', JSON.stringify(this.required_services))
return result
}
The expected result would be for the data function properties to be update after the firebase response came, but no update is happening.
If anyone, have any clues, of what could be happening... some people told me that asynchrounous functions could cause problems... but there is no alternative for them, I guess...

Answer 1

This line
_.required_services[doc.id] = []
is not reactive. See the first point in the docs

Answer 2

So as pointed by #StephenThomas, there is some limitations in array change detection capabilities in reactive property usage.
So after loading the content from firebase, try to push it like this.joblist.push(doc) vue property will not react properly and make some confusion in the head of someone that doesn´t know about this limitation in detecting this kind of array mutation (https://v2.vuejs.org/v2/guide/list.html#Caveats)...
By using this line, now is possible to see the changes in property inside the Vue dev tools
_.joblist.splice(0,0, local_doc)
Thanks #SthephenThomas, for pointing this out!!