Componentization of vue

// index.js

import Vue from "vue"
import App from "./app.vue"
new Vue({
  el: "-sharpapp",
  render: (h) => h(App),
});
< hr >
// app.vue

<template>
  <div id="app">
    
  </div>
</template>

<script>
  export default {
    data: function () {
      return {}
    },
    components: {},
    methods: {},
    mounted() {},
    computed: {}
  }
</script>

<style scoped lang="scss">
</style>

question: the content of
app.vue cannot be rendered correctly. Why? Is it legal to mount dom with el:"- sharpapp" in
index.js?

Jun.08,2022

because the root div "- sharpapp" mounted in your index.js is a DOM rendered by vue. When initializing the mount, hanging a DOM node that can only be obtained after initialization will naturally fail.

Menu