Need help understanding the difference in creating a Vue instance, which is best practice, and when would each option be used?

Question

I am trying to wrap my head around which is the preferred and best practice method for creating your vue instance in your main.js. Creating a new project from the cli it creates the instace as such:

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

However, in the documentation here: https://v2.vuejs.org/v2/guide/instance.html

Vue depicts creating your instance similar to this approach. You can add your el attribute if you want inside the new instance or mount it like I am below. Result seems to be the same, but I am looking for what is considered the best practice among the community, why is one better or recommended over the other, and any other information would be helpful.

const vm = new Vue({
  data: data,
  components: { App },
  template: "<App/>"
});

// Mount vue
vm.$mount("#app");

Thank you guys in advance!

I've read thru the documentation on Vue, searched and read thru articles and posts and haven't found a clear answer to distinguish which is best practice or when to use each.

Answer 1

Vue instance can be associated with and manipulate an element which already exists, also you can have multiple Vue instances in the same project, it's ok, however, you probably don't want to do that.

Vue component is more suitable for creating a new element and reuse it anywhere.