Ура, ура, ура, я нашел время. Добавление, удаление. edit почему-то получает ничего вместо note.

src/App.vue

@@ -2,16 +2,39 @@
 import { ref } from 'vue'
 import Item  from "./components/Item.vue";
 import Edit from "./components/Edit.vue";
+import { Note } from "./models/Note";
 
-const items = ref([{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}])
+const notes = ref([new Note(undefined, 'Make SUS'), new Note(undefined, 'аырофщшгвыпгыфа')])
+const currentNote = ref(new Note())
+
+function processNote(note: Note) {
+  const index = notes.value.findIndex((item) => item.id === note.id)
+  if (index !== -1) {
+    notes.value[index] = note
+  }
+  else {
+    notes.value.push(note)
+  }
+}
+
+function deleteNote(note: Note) {
+  notes.value = notes.value.filter((item) => item.id !== note.id)
+}
+
+function editNote(note: Note) {
+ currentNote.value = note
+}
 </script>
 
 <template>
   <div class="container" id="container">
-    <item v-for="item in items"
+    <item v-for="note in notes"
-          :title="item.title" />
+          :note="note"
+          @delete="deleteNote"
+          @edit="editNote"
+    />
   </div>
-  <edit />
+  <edit @done="processNote" note="{{ currentNote }}"/>
 </template>
 
 <style scoped>

src/components/Edit.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+ defineEmits(['done'])
+ defineProps(['note'])
 </script>
 
 <template>
   <div class="container">
-    <input type="text" v-model="s">
+    <input type="text" v-model="note.title">
-    <div class="btn" @click=""><span><font-awesome-icon icon="fa-solid fa-check" /> Add</span></div>
+
+    <div class="btn" @click="note.title ? $emit('done', note) : null; note = new Note()">
+    <span><font-awesome-icon icon="fa-solid fa-check" /> Add</span></div>
   </div>
 </template>
 

src/components/Item.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-  defineProps(['title'])
+  import { Note } from "../models/Note";
 
+  defineProps(['note'])
+  defineEmits(['delete', 'edit'])
 </script>
 
 <template>
   <div class="container">
-    <input type="checkbox">
+    <input type="checkbox" :checked="note.checked">
-    <span class="title">{{ title }}</span>
+    <span class="title">{{ note.title }}</span>
-      <div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
+    <div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
-      <div class="btn"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
+    <div class="btn" @click="$emit('delete', note)"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
   </div>
 </template>
 <style scoped>

src/main.ts

@@ -11,6 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 /* import specific icons */
 import { faTrash, faPenToSquare, faCheck } from '@fortawesome/free-solid-svg-icons'
 
+
 /* add icons to the library */
 library.add(faTrash, faPenToSquare, faCheck)
 

src/models/Note.ts

@@ -0,0 +1,11 @@
+let currentId = 5;
+
+export class Note {
+
+    constructor(public id = currentId, public title = '', public checked = false) {
+        currentId++
+        this.id = id
+        this.title = title
+        this.checked = checked
+    }
+}

tsconfig.json

@@ -11,7 +11,8 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    "noImplicitAny": false
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]