Vue 'export default' vs 'new Vue'

Question

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data ins

Answer 1

When you declare:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example:

  ...
  
    

  

The other syntax is declaring a component which can be registered and reused later. For example, if you create a single file component like:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

You can later import this and use it like:

// another-component.js

Also, be sure to declare your data properties as functions, otherwise they are not going to be reactive.