title: Nuxt: Page crashing on page reload
body: <p>Anyone know why a sub page crashes when user reloads the page? It is fine when you navigate to the page using nuxt-link from another page (using route params), but when the user reloads/refreshes the page, it will crash.</p>
  <p>Here is my sandbox where you can test it out: <a href="https://codesandbox.io/s/thirsty-nash-4mwol" rel="nofollow noreferrer">Codesandbox</a></p>
  <p>Code from nuxt link:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;nuxt-link :to=&quot;{name: 'photos-id-title', params: { id: photo.id, title: photo.title }}&quot;&gt;
  </code></pre>
  <p>Code from photo details page:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;section&gt;
      &lt;!-- &lt;template v-if=&quot;photo&quot;&gt; --&gt;
      &lt;img
        :id=&quot;photo.filename&quot;
        :src=&quot;photo.url&quot;
        class=&quot;img-fluid thumbnail rounded&quot;
        :alt=&quot;photo.title&quot;
      /&gt;
      &lt;h1 class=&quot;h3&quot;&gt;{{ photo.title }}&lt;/h1&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Annotorious } from '@recogito/annotorious'
  export default {
    data() {
      return {
        photo: {},
        anno: {},
        title: this.$route.params.title
      }
    },
    async mounted() {
      await this.getPhotoDoc()
      this.anno = await new Annotorious({ image: this.photo.filename })
    },
    methods: {
      async getPhotoDoc() {
        const docRef = await this.$fireStore
          .collection('photos')
          .doc(this.$route.params.id)
          .get()
        try {
          if (docRef.exists) {
            // data() returns all data about the doc
            console.log('got the doc: ', docRef.data())
            this.photo = docRef.data()
          } else {
            console.log('no docs exist')
          }
        } catch (error) {
          console.log('Error getting document:', error)
        }
      }
    },
    head() {
      return {
        title: this.photo.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.photo.description
          }
        ]
      }
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  <p>User journey: Click PHOTOS from navbar, select any photo on the page. You shall see a &quot;photo detail&quot; page. Loads fine. Try to refresh the page -- it will crash.</p>
  <p>Note: I also have this scaffolded in a regular/plain vue app using Vue-cli and have NO issues. Only seems to be a problem with Nuxt. Must be SSR related?</p>
  <p>Thanks for any help...</p>