title: Vue lifecycle and firebase: Why do I get "TypeError: Cannot read property 'url' of null"?
body: <p>I'm struggling with an issue . I got this image element in my template like so:</p>
  <pre><code>&lt;img :src=&quot;photo.url&quot; :id=&quot;photo.filename&quot; :alt=&quot;photo.title&quot; v-if=&quot;photo.url&quot; /&gt;
  </code></pre>
  <p>here's my <code>data()</code> function:</p>
  <pre><code>data() {
      return {
        photo: null,
        // set variable during component creation to use when mounting
        anno: {}
      }
  </code></pre>
  <p>and I have a method that grabs data for the img element like so:</p>
  <pre><code>async mounted() {
      // get photo properties
      await this.getPhotoDoc()
      // initialize Annotorious and assign to 'anno' variable for use throughtout component
      this.anno = await new Annotorious({ image: this.photo.filename })
  </code></pre>
  <p>and here's my method for the photo doc:</p>
  <pre><code>    async getPhotoDoc() {
        try {
          const docRef = await photosCollection
            .doc(this.$route.params.id) // to be dynamic
            .get()
          if (docRef.exists) {
            // data() returns all data about the doc
            let photo = await docRef.data()
            this.photo = photo
          } else {
            console.log('no docs exist for this photo')
          }
        } catch (error) {
          console.log('Error getting document:', error)
        }
      }
  </code></pre>
  <p>I can't seem to get rid of this error in console:</p>
  <pre><code>[Vue warn]: Error in render: &quot;TypeError: Cannot read property 'url' of null&quot;
  found in
  ---&gt; &lt;PhotoDetail&gt;
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  </code></pre>
  <p>any one spot anything I can tweak?</p>