title: Unable to access props values in data method in vuejs
body: <p>I have the code (vuejs2) -</p>
  
  <pre><code>Vue.component('competetion-list', {
    template: `&lt;div&gt;{{totalCompetetions}}&lt;/div&gt;`,
    props: ['values'],
    data: function () {
      return { totalCompetetions: this.values.length}
    }
  })
  </code></pre>
  
  <p>Nothing is printed on the page but if I change the <code>template</code> value to </p>
  
  <pre><code>template: `&lt;div&gt;{{this.values.length}}&lt;/div&gt;`
  </code></pre>
  
  <p>it prints <code>15</code>. What am I doing wrong and how can I pass the <code>props</code> to the <code>data</code>?</p>
  
  <p>Any help is much appreciated.</p>