Firestore and VueJS: How to update field in nested object in a firestore collection?

I have a nested object within a document that I am trying to update. I am trying to update the avatarUrl property in the author object of my photos collection (see screenshot below). However, despite looking at the docs here and using dot notation, I can't seem to update my field!

Here's my reference I am trying to update: photos > docId > author.avatarUrl

Here is my relevant code. When I let user update his avatar URL, I also need to update all his docs with his new avatar

When I let user update his avatar URL, I also need to update all his docs with his new avatar

        // update all photo docs by user
        const photoDocs = await this.$fireStore
          .collection('photos')
          .where('userId', '==', this.userProfile.uid)
          .get()
        photoDocs.forEach((doc) => {
          this.$fireStore.collection('photos').doc(doc.id).update({
            'author.avatarUrl': this.avatarUrl
          })
        })