title: Prop shows in Dev tools but shows undefined when used
body: <p>I'm passing a simple ID down to a child component but have an undefined console log error and cannot use the prop</p>
  
  <p>I pass the prop here to the child</p>
  
  <pre><code>&lt;transactions v-show="active_tab == 2" :userId="affiliate.user_id"&gt;&lt;/transactions&gt;
  </code></pre>
  
  <p>Which is then picked up in the child here </p>
  
  <pre><code>props: ["userId"]
  </code></pre>
  
  <p>I then just try and console log the prop like so </p>
  
  <pre><code>console.log(this.userId);
  </code></pre>
  
  <p>As you can see from the image the prop is showing up in Devtools
  <a href="https://i.stack.imgur.com/dcXSy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dcXSy.png" alt="Prop is showing here"></a></p>
  
  <p>Error is as follows</p>
  
  <p>[Vue warn]: Invalid prop: type check failed for prop "userId". Expected String with value "undefined", got Undefined </p>