title: Error in mounted hook (Promise/async) when fetching data from the server
body: <p>I'm new to Vue, I have a WebPage component(movie song list) that receives a movie_id from the page route parameters (through this.$store.state.route.params.movieId), then fetches the actual user song data from the database on the server using a command: this.movie = (await MoviesService.show(movieId)).data, the show function is to find the params in db by id and send the content back to front end. </p>
  
  <p>My question is that whenever I click on the view button, the website will link to the certain id page with a basic frame, but it can't get the content in the movie song list web page. <a href="https://i.stack.imgur.com/hGglb.gif" rel="nofollow noreferrer">The error demo</a> <a href="https://i.stack.imgur.com/gEtHU.png" rel="nofollow noreferrer">The snapshot in postman</a></p>
  
  <p>The error shows in the console is: </p>
  
  <blockquote>
    <p>[Vue warn]: Error in mounted hook (Promise/async): "Error: Request
    failed with status code 500" found in --->  at
    src/components/ViewMovie.vue  at src/App.vue </p>
  </blockquote>
  
  <p>ViewMovie.vue:</p>
  
  <pre><code>&lt;template&gt;
  &lt;panel title= "Movies theme song list"&gt;
        &lt;div class="movie-title"&gt;
            {{movie.title}}
        &lt;/div&gt;
        &lt;div class="movie-artist"&gt;
            {{movie.artist}}
        &lt;/div&gt;
        &lt;div class="movie-album"&gt;
            {{movie.album}}
        &lt;/div&gt;
        &lt;/panel&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import MoviesService from '@/services/MoviesService'
  import Panel from '@/components/Panel'
  export default {
    async mounted () {
      const movieId = this.$store.state.route.params.movieId
      this.movie = (await MoviesService.show(movieId)).data
    },
    data () {
      return {
        movie: {}
      }
    },
    components: {
      Panel
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>MoviesController.js:</p>
  
  <pre><code>const {Movie} = require('../models')
  
  module.exports = {
    async show (req, res) {
      try {
        const movie = await Movie.findById(req.params.movieId)
        res.send(movie)
      } catch (err) {
        res.status(500).send({
          error: 'An error has occured trying to fetch the movie'
        })
      }
    },
    async post (req, res) {
      try {
        const movie = await Movie.create(req.body)
        res.send(movie)
      } catch (err) {
        res.status(500).send({
          error: 'An error has occured trying to create the movie'
        })
      }
    }
  }
  </code></pre>
  
  <p>MoviesService.js:</p>
  
  <pre><code>import Api from '@/services/Api'
  
  export default {
    index () {
      return Api().get('movies')
    },
    show (movieId) {
      return Api().get(`movies/${movieId}`)
    },
    post (movie) {
      return Api().post('movies', movie)
    }
  }
  </code></pre>