This first toolbar feature is also the easiest. It only consists of a text input bound to the title property of the selected note with the v-model directive.
In the toolbar div element we just created, add this input element with the v-model directive and a placeholder to inform the user of its function:
<input v-model="selectedNote.title" placeholder="Note title" />
You should have a functional rename field above the text editor and see the note name change automatically in the note list as you type:
Since we set the deep option on the notes watcher, the note list will be saved whenever you change the name of the selected note.