title: displaying laravel show method on vue component
body: <p>i have a list of movies am trying to display the details of one movie using the show method
  here is my component for all movies</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;el-row :gutter="10"&gt;
              &lt;el-col :span="6" v-for="movie in movies" v-bind:key="movie"&gt;
                  &lt;el-card shadow="always" :body-style="{ padding: '0px'} "&gt;
                      &lt;img v-bind:src="movie.cover_photo" class="image" &gt;
                          &lt;div style="padding: 14px;"&gt;
                              &lt;div class="bottom clearfix"&gt;
  
                                  &lt;router-link :to="{name:'details',params:{id:movie.id}}"&gt;{{movie.title}}&lt;/router-link&gt; 
                                      &lt;router-view&gt;&lt;/router-view&gt;
                                      &lt;h4&gt;{{ movie.year }}&lt;/h4&gt;
                                      &lt;h4&gt;{{ movie.type }}&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div class="block"&gt;
                                  &lt;el-rate  :max="10" &gt;&lt;/el-rate&gt;
                              &lt;/div&gt;          
                          &lt;/div&gt;
                  &lt;/el-card&gt;
              &lt;/el-col&gt;
          &lt;/el-row&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import axios from 'axios'
      export default {
          data() {
              return {
                  movies: [],
                  movie:{
                      id:'',
                  }
              };
          },
          created(){ 
            this. fetchMovieList(); 
            this.showMovie
          },
          methods: {
              fetchMovieList() {
                      axios.get('/movies').then(response =&gt; {
                          this.movies = response.data;
                      })
                     .catch(error=&gt;console.log(error))
              },
              showMovie(id){
                  axios.get('/movies/'+id).then((res)=&gt;{
  
                  if(res.data.status==true){
                      this.movie= res.data.movie;
                      console.log(res.data.movie)
                  }else{
                      alert('No Movie founded with this id')
                  }
              })
              .catch((err)=&gt;{alert('error')})
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .image {
      width: 100%;
      display: block;
    }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>my show method:</p>
  
  <pre><code>public function show($id)
  {
          $movie=Movie::find($id);
      if($movie){
          return response()-&gt;json(['status'=&gt;true,'movie'=&gt;$movie]);
      }else{
          return response()-&gt;json(['status'=&gt;false]);
      }
  }
  </code></pre>
  
  <p>my router on <em>app.js</em>:</p>
  
  <pre><code>const movie=Vue.component('details', require('./components/DetailsComponent.vue').default);
  
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  const router=new VueRouter({
      mode:'history',
      routes:[
          {
              path:'/movie/:id',
              name:'movie',
              component:movie
          },
  
  
      ],
  
  });
  
  const app = new Vue({
      el: '#app',
     router,
  });
  </code></pre>
  
  <p>when i click on the router link it just changes the url to the id of the movie but it doesnt show the component with details when i hit the show endpoint with a specific id  it returns the movie in json format on the browser</p>