title: Vue.js component does not receive prop
body: <p>I would like to pass a ride to the show-ride-modal. When somebody clicks on the button <code>show</code> a modal will pop-up with the ride information. </p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Door&lt;/th&gt;
              &lt;th&gt;Van&lt;/th&gt;
              &lt;th&gt;Naar&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Datum&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;  
          &lt;tr v-for="ride in rides"&gt;
            &lt;show-ride-modal :ride="ride"&gt;&lt;/show-ride-modal&gt;
            &lt;td&gt;{{ ride.user.name }}&lt;/td&gt;
            &lt;td&gt;{{ ride.location.from }}&lt;/td&gt;
            &lt;td&gt;{{ ride.location.to }}&lt;/td&gt;
            &lt;td&gt;{{ ride.type.name }}&lt;/td&gt;
            &lt;td&gt;{{ ride.date }}&lt;/td&gt;
            &lt;td&gt;
                &lt;a @click="show" class="btn-show"&gt;show&lt;/a&gt;
                &lt;a v-link="{ name: 'ritten' }" class="btn-edit"&gt;Bewerk&lt;/a&gt;
                &lt;a v-link="{ name: 'ritten' }" class="btn-delete"&gt;Remove&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;  
      &lt;/tbody&gt;             
    &lt;/table&gt;
  </code></pre>
  
  <p>My <code>show ride modal component</code>:</p>
  
  <pre><code>&lt;template&gt;
  &lt;modal title="Bekijk rit"&gt;
    &lt;form class="Modal__form" @submit.prevent="createTopic"&gt;
      &lt;p&gt;test&lt;/p&gt;
      &lt;p&gt;{{ ride.user.name }}&lt;/p&gt;
    &lt;/form&gt;
  &lt;/modal&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Modal from './Modal.vue'
  
  export default {
  
    components: { Modal },
  
    props: ['ride'],
  
    data () {
      return {
        showLoader: false
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that the ride is not being passed to the <code>&lt;show-ride-modal&gt;</code>. What could be wrong?</p>