title: Trying to change data vue.js
body: <p>i am trying to override my data in the App.vue component. But everytime it takes the default data from the component if i try to overwrite it in my main.js. I am also making use of webpack</p>
  
  <p><b>App.vue</b></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="message"&gt;{{ message }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  //import TopBar from './top-bar.vue'
  export default {
      name: 'App',
      data () {
          return {
              message: 'hello world'
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><b>main.js</b></p>
  
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  
  new Vue({
      el: '#app',
      template: '&lt;App/&gt;',
      components: { App: App },
      data: {
        message: 'New text'
      }
  })
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script src="dist/build.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>