MVVM architectural pattern

Do you remember how we were creating the Vue instance in the first chapter? We were instantiating it calling new Vue({...}). You also remember that in the options, we were passing the element on the page where this Vue instance should be bound and the data object that contained the properties we wanted to bind to our View. The data object is our Model and the DOM element where the Vue instance is bound is our View:

Classic View-Model representation where the Vue instance binds one to another

In the meantime, our Vue instance is something that helps to bind our Model to the View and vice versa. Our application thus follows Model-View-ViewModel (MVVM) pattern, where the Vue instance is a ViewModel:

The simplified diagram of the Model-View-ViewModel pattern

Our Model contains data and some business logic, and our View is responsible for its representation. ViewModel handles data binding, ensuring that the data changed in the Model is immediately affecting the View...