Using reactivity

One of the objectives of Vue.js is to separate the management of the display (the view) and that of the data (the model). This is the concept that is frequently found in what is called the Model View Controller (MVC) model.

To illustrate, suppose we want to display a counter that increments from 0. A good separation of view and model would be for the view to constantly display the value of the counter, even if that value is changed elsewhere. This concept makes it possible not to link the display with the management of the data displayed. For this, we use the reactivity offered by Vue.js, by creating so-called reactive variables.

Reactive Variables

A variable will be said to be reactive if its modification in memory causes it to be modified automatically wherever the variable is displayed.

Reactive variables are defined in the options object of the Vue.createApp(options) method. For this, we add in the options object, and the definition of the data() method...