A simple web-based contact store application using vuejs, vue-cli (possibly vuex, vuerouter). How did you do it?

Question

Vue.js

Hello programmers.
I'm a beginner, now I'm learning about VueJs, VueCli.
We need your expert help.
For practice, I'm trying to write a simple telephone directory with access via the Web
interface (without using databases).


Possible actions:
● add a phone (string) and a name (string) to the directory
● display a list of names-numbers
● search for a substring of the name using the search string
● delete from the directory (from the list).
Display: A
list of names-numbers is displayed, all actions are available from this list - adding,
searching, deleting, displaying information on found numbers (if
substring of search by name, then only filtered names
-numbers get into the list).
Duplicate names-numbers cannot be added. In case of unavailable and inadequate actions,
display appropriate messages.
It is necessary to complete the task using VueJs + Bootstrap 4, it is possible to use vuex, vuerouter.

Help with advice or a link to something similar.

Answer 1

Written on the knee but the principle is working:

It remains to implement the search, check when adding and deleting well, and bring beauty with styles.
There is nothing complicated - Good luck! If so ask ;)