Newbie on big project, data binding question

I read the whole documentation but need advices.

I have a big object with arrays of subobjects, needed to be edited through a form.
Let’s say it’s a House cointaining Rooms containing Beds.
I should be able to add, modify or remove Rooms and Beds.
How to do it ?
I created this 3 level hierarchy with components and child components, with v-for loops (room in rooms / bed in beds)
Screenshot 2021-11-17 at 22.33.26
But how could I modify the form and keep the data binding on the entire House ?
Let’s say with a button I wanna remove the second bed of the third room.
It would be a splice on House.Rooms[2].Beds[1]
But from the bed components and its form, how could I go up and change the containing object House ? I tried to play with mounted, data, computed, methods section but I’m lost.

Sorry might be messy but I miss overview on VueJs structure. It’s obviously a data binding question.
Merci ! Sylvain.

There are two approaches you can take,

  1. Emit an event up from the BedComponent so that the HouseComponent can mutate it’s data and the props you’re passing to BedComponent will reflect this.
  2. If the components are far apart (deep children or siblings) then using state management is preferred.

Merci James !
I’ve read that event bus is pretty the same than an event from $root and I didn’t want to use Vuex cause I want to code Vanila VueJs, no extension.
I just use this.$ every where in the hierarchy, could go even deeper Bed > Matress > Textile > etc. They all come from the this.$ root object.
It’s not orthodox but works, liks so many things in life.