When a note is selected, it becomes the context of the middle and right panes of the app--the text editor modifies its content, and the preview pane displays its formatted markdown. Let's implement this behavior!

1. Add a new data property called selectedId that will hold the ID of the selected note:

      data () {
        return {
          content: localStorage.getItem('content') || 'You can write in         
          **markdown**',
          notes: [],
          // Id of the selected note
          selectedId: null,
        }
      },

2. We need a new method that will be called when we click on a note in the list to select ID. Let's call it selectNote:

      methods: {
        ...

        selectNote (note) {
          this.selectedId = note.id
        },
      }

3. Like we did for the add note button, we will listen for the click event with the v-on directive on each note item in the list:

      <div class="notes">
        <div class="note" v-for="note of notes"         
        @click="selectNote(note)">{{note.title}}</div>
      </div>

Now, you should see the ;updated selectedId data property when you click on a note.