Vue component does propagate created data but not update/delete

Hi all !

I have the following structure of components :

School -> MapBox -> StudentMap

School -> Institute -> Student

• School : is just a wrapper (master component)

• Institute : Is a CRUD for the institute from the database and has Student's children

• Student : is a CRUD for the student

• MapBox : Create a OpenStreetMap

• StudentMap : Is there to construct the layer with informations with leaflet

I retrieve from the database Institutes which have Students

I know I should need to use Vuex store to have a perfect and clean share of the datas but I had only one week to develop the project and I don't master Vuex still.

The Student component is responsible to edit/delete itself, Institute is responsible to create student, and edit/delete itself. The School, receive the Institutes via laravel json which bind it in the View at the loading.

Whenever an Institute or Student is created/update/deleted, I added event that emits from child to parent to update the data (which is the opposite of what Vue allow but in this usecase I need to let the master component (School) be up-to-date to propagate to the other branch MapBox -> StudentMap.

I have a watcher for the institute / student in the StudentMap and it is triggered when I add new Institute / Student. But when I update / delete, Nothing happen.

I followed of course the good practice to be sure that Vue can catch the modification, like Vue.delete() and Vue.set() or arr.splice() I found thoses informations here (https://fr.vuejs.org/2016/02/06/common-gotchas/)

But Nothing is happening. I don't understand why the Vue propagate the informations when it's created. But not update / delete.

The code is too bit to be put here, but if the description is not clear enough, I created a gist with it all. (https://gist.github.com/dib258/467417e362e5cf6cdecfb839fb53de9e)

Thanks in advance for you help