How to render data in Vue instance of Vue Cli project

Question

I created a Vue project by Vue-Cli for study. It works well when all the data are stored in Components. But my question is why the data in Root Vue instance can't be rendered on root app instance. It's also the same question when I use webpack + vue-loader.

main.js

import Vue from 'vue'
//import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: "#app",
    data() {
        return {
            msg: "Hello from Vue!"
        }
    }
}).$mount('#app');

msg can't show at page index.html

<div id="app">
  {{msg}}
</div>

Answer 1

You are overriding the render function, the render function tell what your componenents should render:

new Vue({
    ...
    render: h => h(App)
}).$mount('#app');

Remove the custom render function, and it will use a template from the element you mount it on.

// import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    data() {
        return {
            msg: "Hello from Vue!"
        }
    },
}).$mount('#app');

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{msg}}
</div>

Answer 2

To complement @Ferrybig's answer

You replied Your solution only works when we use a direct include vue.js file. Failed when use vue-cli or webpack vue-loader. to @Ferrybig's answer.

The reason is that https://cdn.jsdelivr.net/npm/vue/dist/vue.js is a full build of Vue. But by default, vue-cli use a Runtime-only build (to improve performance).

In order to use a full Vue build for your vue-cli project, find your webpack config and change vue$ alias to be like this:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

This is explained in https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds .