title: Vuejs - pass data from parent to child with props
body: <p>I have started playing with <code>Vue</code> but faced an issue when trying to pass data to a component using <code>props</code>. In the code below <code>this.myData</code> (in the <code>Hello.vue</code>) is <code>undefined</code> for some reason</p>
  
  <p>App.vue</p>
  
  <pre><code>&lt;script&gt;
  import Hello from './components/Hello'
  
  export default {
    name: 'app',
    data() {
      return {
        myData: 'this is my data'
      }
    },
    components: {
      Hello
    } ...
   &lt;/script&gt;
  </code></pre>
  
  <p>Hello.vue</p>
  
  <pre><code>&lt;script&gt;
  export default {
    name: 'hello',
    props: ['myData'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
    mounted: function() {
         console.log(this.myData)
     }
  } ...
  &lt;/script&gt;
  </code></pre>