title: Vuejs how to pass data from main.js to App.vue with props
body: <p>I'm having an issue where the App component and HelloWorld component are not getting passed data from main.js. This should be a rather simple thing to do in Vue. 
  <a href="https://i.stack.imgur.com/a9QiI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a9QiI.png" alt="vue counter 10"></a></p>
  
  <p>You can see in the image that the root element has counter defined as 10, it's just not being populated in any of the child components. almost like line 12 in main.js is not taking any effect. If I click  and  it says 'counter: undefined'. What am I doing wrong? I've been beating my head against the wall for a few hours now.</p>
  
  <p>Here is my main.js</p>
  
  <pre class="lang-javascript prettyprint-override"><code>import Vue from 'vue'
  import App from './App.vue'
  
  Vue.config.productionTip = false
  
  new Vue({
  
    components: {App},
    data: {
      counter: 10
    },
    template: '&lt;App :counter="counter" /&gt;',
    //computed: {
    //  counterInc: function () {
    //    return this.counter++
    //  }
    //},
    methods: {
      updateCounter (x) {
        this.counter = x
      }
    },
  
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  
  <p>Here is my App.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;img alt="logo" src="./assets/logo.png"&gt;
      &lt;HelloWorld msg="Our Message" :counter="counter"/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HelloWorld from './components/HelloWorld.vue'
  
  export default {
    name: 'app',
    props: ['counter'] ,
    components: {
      HelloWorld
    },
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my helloworld.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;h1&gt;{{ msg }}&lt;/h1&gt;
      &lt;p&gt;
        Here lies all of our operations for automating some strenuous tasks. &lt;br&gt;
      &lt;/p&gt;
      &lt;h3&gt;Get Started {{ counter }}&lt;/h3&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a v-on:click="updateCounter()" class="generateRollup"&gt;Generate Purchase Price&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
      counter: String,
    }
  }
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #0093D0;
  }
  .generateRollup:hover {
    cursor: pointer;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>