[FIX] compiler: t-key and t-ref together

Have a t-ref on a DOM node with a t-key.
Change the t-key.

Before this commit, the old block removed its element from the component's refs *after*
the new block had been mounted, meaning that in effect, the resulting
ref at the end of the whole patch was null.

After this commit, we only remove an element from the component's ref if that very same
element was indeed the ref. (otherwise it means someone else has changed the ref.)

tests/components/refs.test.ts

@@ -1,4 +1,13 @@
-import { App, Component, mount, onMounted, useRef, useState, xml } from "../../src/index";
+import {
+  App,
+  Component,
+  mount,
+  onMounted,
+  onPatched,
+  useRef,
+  useState,
+  xml,
+} from "../../src/index";
 import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
@@ -127,4 +136,33 @@ describe("refs", () => {
     expect(fixture.innerHTML).toBe("<p>a<p>b</p></p>");
     expect(["<p>b</p>", "<p>a<p>b</p></p>"]).toBeLogged();
   });
+
+  test("refs and t-key", async () => {
+    let el;
+    class Test extends Component {
+      static components = {};
+      static template = xml`
+        <button t-on-click="() => state.renderId++" />
+        <p t-ref="root" t-key="state.renderId"/>`;
+      root = useRef("root");
+      state = useState({ renderId: 1 });
+
+      setup() {
+        onMounted(() => {
+          el = this.root.el;
+        });
+        onPatched(() => {
+          el = this.root.el;
+        });
+      }
+    }
+    await mount(Test, fixture);
+
+    expect(el).toBe(fixture.querySelector("p"));
+    const _el = el;
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(el).not.toBe(_el);
+    expect(el).toBe(fixture.querySelector("p"));
+  });
 });