new Vue({
        el: '#app',
        data: {
          note: {
            text: '',
            topic: "Домашнее",
            color: "white",
            important: false
          },
          notes: []
        },
        mounted() {
          if (localStorage.getItem('notes')) {
            try {
              this.notes = JSON.parse(localStorage.getItem('notes'));
            } catch(e) {
              localStorage.removeItem('notes');
            }
          }
        },
         computed: {
          getNotes() {
            return this.notes.slice()
          }
        },
        methods: {
          add() {
            if (this.note.topic.length == 0 ) this.note.topic = "Домашнее";
            if (this.note.color == "yellow") this.note.color = "#f7f7c1";
            else if (this.note.color == "blue") this.note.color = "#e3f3ff";
            else if (this.note.color == "pink") this.note.color = "#f2d0ea";
            else if (this.note.color == "purple") this.note.color = "#d8bfd8";
            else if (this.note.color == "green") this.note.color = "#c2ff99";
            this.notes.push({ ...this.note });
            this.saveData();
            this.note.text = '';
            this.note.color = "white";
            this.note.important = false;
            this.note.topic = "Домашнее";
          },
          remove(index) {
            this.notes.splice(index, 1);
            this.saveData();
          },
          saveData() {
            const parsed = JSON.stringify(this.notes);
            localStorage.setItem('notes', parsed);
          }
        }
      });