title: vue.js passing data from parent single file component to child
body: <p>Using single file architecture I'm trying to pass data (an object) from a parent component to a child:</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;app-header app-content={{app_content}}&gt;&lt;/app-header&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import appHeader from './components/appHeader'
  import {content} from './content/content.js'
  
  export default {
    components: {
      appHeader
    },
    data: () =&gt; {
      return {
        app_content: content
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>appHeader.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;header id="header"&gt;
      &lt;h1&gt;{{ app_content }}&lt;/h1&gt;
    &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: () =&gt; {
      return {
        // nothing
      }
    },
    props: ['app_content'],
    created: () =&gt; {
      console.log(app_content) // undefined
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Seems to be such a trivial task and probably the solution is quite simple. Thanks for any advice :)</p>