Splitting the application into components

When you create an application with Vue.js, you have to start by asking yourself what components you will need to build it.

In our case, it would be the following:

• A <GlobalApp> component that groups the whole application. It is this <GlobalApp> component that will be integrated into our index.html page. It will display the Add Element button as well as the list of elements below.
• An <Element> component that displays a list element line, which will include the element’s text, the Remove button, and the Modify button.

The list of elements will be associated with a reactive variable named elements, which will be an array containing, for each element, the displayed text. This reactive variable will be registered in the <GlobalApp> component. It will be modified when adding a new element to the list or when deleting or modifying an element in the list.

So, the core files of our app are as...