vue的组件化

Question

// index.jsimport Vue from 'vue'import App from './app.vue'new Vue({
  el: '#app',
  render: (h) => h(App),
});

---

// app.vue<template>
  <div id="app">
    测试  </div></template><script>
  export default {    data: function () {      return {}
    },    components: {},    methods: {},
    mounted() {},    computed: {}
  }</script><style scoped lang="scss"></style>

问题：
app.vue的内容不能正确渲染出来，为什么？？
index.js中用 el: '#app' 的方式挂载dom是否合法？？