Use two-way data binding with lesson documentations

aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js

 export default {
     methods: {
-
+        notifyChange(event) {
+          alert("Probably save the data");
+          console.log(event);
+        },
     },
     props: [],
     name: "course-book",
@@ -151,9 +154,24 @@ export default {
       <v-subheader>{{ lesson.subject.name }}</v-subheader>
       <v-row>
         <v-col v-for="item in lesson_documentations" cols="12" v-bind:key="item.id">
-          <lesson-documentation v-bind:key="item.id" :groups="lesson.groups" :excuse-types="excuse_types" :extra-marks="extra_marks"
-             :period="item.period_formatted" :personal-notes="item.personal_notes"
-            :date="item.date" :topic="item.topic" :homework="item.homework" :group-note="item.group_note"
+          <lesson-documentation
+            v-bind:key="item.id" :groups="lesson.groups" :excuse-types="excuse_types" :extra-marks="extra_marks"
+             :period="item.period_formatted"
+             
+             :personal-notes="item.personal_notes"
+             @change-personal-notes="notifyChange"
+             
+             :date="item.date"
+             @change-date="notifyChange"
+             
+             :topic="item.topic"
+             @change-topic="notifyChange"
+             
+             :homework="item.homework"
+             @change-homework="notifyChange"
+             
+             :group-note="item.group_note"
+             @change-group-note="createNotification('course-book');"
           ></lesson-documentation>
         </v-col>
       </v-row>

aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js

 export default {
-    methods: {},
     props: ["date", "period", "topic", "homework", "groupNote", "personalNotes", "groups", "excuseTypes", "extraMarks"],
     name: "lesson-documentation",
     data: () => {
@@ -33,7 +32,7 @@ export default {
                   <v-date-picker
                   scrollable
                   no-title 
-                  @input="showPicker = false"
+                  @input="showPicker = false; $emit('change-date', $event)"
                   v-model="datePick"
                   ></v-date-picker>
                 </v-menu>
@@ -73,7 +72,9 @@ export default {
               rows="1"
               auto-grow
               required
+              
               :value="topic"
+              @input="$emit('change-topic', $event)"
             ></v-textarea>
             <v-textarea
               name="input-7-1"
@@ -82,6 +83,7 @@ export default {
               auto-grow
               
               :value="homework"
+              @input="$emit('change-homework', $event)"
             ></v-textarea>
             <v-textarea
               name="input-7-1"
@@ -90,6 +92,7 @@ export default {
               auto-grow
               
               :value="groupNote"
+              @input="$emit('change-group-note', $event)"
             ></v-textarea>
           </v-col>
           <v-col sm="12" md="4" lg="3">