Using component data and methods

As Vue components are self-contained elements of your Vue app, they each have their own data and functions. This helps when re-using components on the same page, as the information is self-contained per instance of a component. methods and computed functions are declared the same as you would on the Vue app, however, the data key should be a function that returns an object.

Note

The data object of a component must be a function. This is so that each component has its own self-contained data, rather than getting confused and sharing data between different instances of the same component. The function must still return an object as you would in your Vue app.

Create a new component called balance, add a data function and computed object to your component and an empty <div> to the template property for now:

      Vue.component('balance', {
        template: '<div></div>',
        data() {
          return {

          }
        },
        computed...