[FIX] component, fiber: subchildren should also patch and destroy their children

Have a GrandParent which controls whether one of its GrandChildren is displayed or not.
First, the GrandChild is displayed. Then, change the state of the GrandParent in order to kill
the GrandChild.

Before this commit the GrandChild is only removed from the DOM, as bdom correctly works.
But it is not destroyed.

After this commit, the GrandChild is correctly destroyed.

tests/components/basics.test.ts

@@ -863,6 +863,43 @@ describe("basics", () => {
       "Child:mounted",
     ]).toBeLogged();
   });
+
+  test("GrandChild display is controlled by its GrandParent", async () => {
+    class GrandChild extends Component {
+      static template = xml`<div />`;
+      setup() {
+        useLogLifecycle();
+      }
+    }
+
+    class Child extends Component {
+      static components = { GrandChild };
+      static template = xml`<GrandChild t-if="props.displayGrandChild" />`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<t t-component="myComp" displayGrandChild="displayGrandChild"/>`;
+      myComp = Child;
+      displayGrandChild = true;
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div></div>");
+    expect([
+      "GrandChild:setup",
+      "GrandChild:willStart",
+      "GrandChild:willRender",
+      "GrandChild:rendered",
+      "GrandChild:mounted",
+    ]).toBeLogged();
+
+    parent.displayGrandChild = false;
+    parent.render();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("");
+
+    expect(["GrandChild:willUnmount", "GrandChild:willDestroy"]).toBeLogged();
+  });
 });
 
 describe("mount targets", () => {