title: Vue component prop value is undefined when accessing from template
body: <p>I created 2 Vue components: </p>
  
  <pre><code>Vue.component('vimeo', {
      template: '&lt;iframe src="https://player.vimeo.com/video/' + this.videoId + '" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;',
      props: ['videoId']
  });
  
  Vue.component('videos', {
      template: '&lt;div id="videos"&gt;' + 
                  '&lt;div v-for="videoId in videoIds"&gt;' +
                      '&lt;vimeo :video-id="videoId"&gt;&lt;/vimeo&gt;' +
                  '&lt;/div&gt;' +
                '&lt;/div&gt;',
      computed: {
          videoIds: function() {
              return store.state.videoIds;
          }
      }
  });
  </code></pre>
  
  <p>However, the this.videoId is always undefined in the 'vimeo' component template. If I change the template to: </p>
  
  <pre><code>&lt;h1&gt;{{ videoId }}&lt;/h1&gt;
  </code></pre>
  
  <p>the prop value can be displayed properly. </p>
  
  <p>I have searched the internet for solutions to this, but unfortunately, I have not got any.</p>