title: Converting data to props for root component in Vue.js 2
body: <p>This must be simple, but haven't cracked it...</p>
  
  <p>In vue, I think I get how to pass <em>props</em> from parent to child components.  And I understand that I have an app state in the <code>data</code> member of the vue instance.  What I don't understand is how to get the <code>data</code> state into the root app as props.</p>
  
  <p>It seems there are a few ways to organize a vue app, so here's what I'm trying to make work:</p>
  
  <p>index.ts</p>
  
  <pre><code>import app from './app.vue'
  
  export default new Vue({
      // App Root Element
      el: '#app',
      render: (c) =&gt; c('app'),
      components: {
        app
      },
      data: {
          someValue: 42
      }
  })
  </code></pre>
  
  <p>app.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          Some Value: {{someValue}}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
      export default {
          props: ['someValue']
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>I assume it should be something like the following, but I don't know how to get a reference directly to the <code>data</code> - unless I keep a reference to it outside of vue for this purpose, but that seems like it should not be necessary:</p>
  
  <pre><code>render: (c) =&gt; c('app', { someValue: ??? }),
  </code></pre>