[FIX] component: merge hooks properly

Before this commit, creating a sub component with
t-att-style/t-att-class attributes or with t-on- event handlers would
override the *hook* object rendered by the sub component.

This is an issue for some directives, such as t-ref, which defines
hook functions.

This commit fixes the issue by checking for an override, and wrapping
the hooks in a function that calls each defined hook.

closes #638

tests/component/component.test.ts

@@ -1273,6 +1273,35 @@ describe("composition", () => {
     expect(parent.elem4.comp).toBeNull();
   });
 
+  test("t-ref on a node, and t-on-click", async () => {
+    let c;
+    let v = false;
+    class Child extends Component {
+      static template = xml`<div t-ref="nibor">nibor</div>`;
+      nibor = useRef("nibor");
+      mounted() {
+        c = this;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<div><Child t-on-click="doSomething"/></div>`;
+      static components = { Child };
+      doSomething() {
+        v = true;
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>nibor</div></div>");
+    expect(c.nibor.el).toBeInstanceOf(HTMLElement);
+    expect(v).toBe(false);
+    c.nibor.el.dispatchEvent(new Event("click"));
+    expect(v).toBe(true);
+    expect(QWeb.TEMPLATES[Child.template].fn.toString()).toMatchSnapshot();
+    expect(QWeb.TEMPLATES[Parent.template].fn.toString()).toMatchSnapshot();
+  });
+
   test("parent's elm for a children === children's elm, even after rerender", async () => {
     const widget = new WidgetA();
     await widget.mount(fixture);