Проблемы с привязкой данных в vue.js и событиях

Я работаю над базовым приложением для блокнота, на данный момент функциональность проста, создайте заметку, когда закончите, щелкните заметку из списка ранее созданных заметок, чтобы просмотреть ее детали. Я не могу нажать на заметку и посмотреть подробности, вместо этого я вижу подробности компонента ShowNote.vue в нижней части шаблона блокнота, и чтобы увидеть подробности, я должен сделать v-if=" noteIsOpen для false". Я также не могу увидеть данные из привязки данных в файле ShowNote.vue. Кроме того, когда вы нажимаете кнопку «плюс», детали из заметки заполняют страницу, которую кнопка генерирует при нажатии. Я вставлю скриншоты моего кода ниже. Пожалуйста, помогите мне понять это. Я попытался исправить реквизит, и когда я это сделал, я наконец смог увидеть детали заметки.

App.vue
<template>
  <div class = "body">
    <div class = "notepad-container h-75 w-75">
      <header class = "header d-flex justify-content-center align-items-center">
        <h4>Light Notepad v1</h4>
      </header>

      <section class = "notepad-content" v-if = "editorIsOpen === false">
        <note-list
          v-for = "note in notes"
          :key = "note.id"
          :note = "note"
        ></note-list>
        <add-note-button @open-editor = "openNewEditor"></add-note-button>
      </section>

      <section class = "notepad-editor" v-if = "editorIsOpen === true">
        <save-button></save-button>
      </section>

      <section class = "notepad-content" v-if = "noteIsOpen === true">
        <show-note 
        :note = "notes"
        @open-note = "readNote"
        />
      </section>

      <section class = "notepad-content" v-if = "noteIsOpen === false">
        <show-note 
        :note = "notes"
        @open-note = "openNote"
        />
      </section>
      
    </div>
  </div>
</template>
<script>
import AddNoteButton from "./components/AddNoteButton.vue";
import NoteList from "./components/NoteList.vue";
import SaveButton from "./components/SaveButton.vue";
import ShowNote from "./components/ShowNote.vue";

export default {
  components: {
    NoteList,
    AddNoteButton,
    SaveButton,
    ShowNote,
  },
  data() {
    return {
      editorIsOpen: false,
      noteIsOpen: false,
      notes: [
        {
          id: 1,
          title: "1st Note",
          body: "This is a note",
          date: "10/17/20",
        },
        {
          id: 2,
          title: "2nd Note",
          body: "This is a note",
          date: "11/17/20",
        },
      ],
    };
  },
  methods: {
    openNewEditor() {
      this.editorIsOpen = !this.editorIsOpen;
    },
    readNote() {
      this.noteIsOpen = !this.noteIsOpen;
    },
  },
};
</script>

AddNoteButton.vue

<template>
  <div class = "add-note-container" @click = "openEditor">
    <b-icon-plus-circle></b-icon-plus-circle>
  </div>
</template>

<script>
import {BIconPlusCircle} from 'bootstrap-vue';
export default {
  emits: ['open-editor'],
  components: {
    BIconPlusCircle
  },
  methods: {
    openEditor() {
      console.info('hello');
      this.$emit('open-editor');
    }
  }
}
</script>

NoteList.vue

<template>
<div>
    <b-list-group>
      <b-list-group-item button @click = "openNote()" 
        >{{ note.title }} - {{ note.date }}</b-list-group-item
      >
    </b-list-group>
    </div>
</template>
<script>
export default {
  emits: ['open-note'],
  props: {
    note: {
      required: true,
    },
  },
  methods: {
    openNote() {
      this.$emit('open-note');
      console.info("clicked from NoteList");

    },
  },
};
</script>

ПоказатьNote.vue

<template>
  <div>
   note details: 
    Note ID: {{ note.id }}, Date: {{ note.date }},
    Title: {{ note.title }}, Body: {{ note.body }}
  </div>
</template>

<script>
export default {
  name: 'showNote',
  props: {
    note: {
      required: true,
    }
  },
  
};
</script>