On hover, display overlay element but it is blinking

I have a canvas and overlay text on top of it. I want to display the text only if mouse is hovering on the canvas.
It is working on simple HTML https://codepen.io/Ariel-Ariel-the-bold/pen/MYgvvxZ

.rootc {
  display: flex;
}

.container {
  flex-grow: 1;
  flex: 1;
  position: relative;
  background-color: green;
}

.div1 {
  width: 100%;
  background-color: red;
}

.div1:hover ~ .div2 {
  display: flex;
}

.div2 {
  position: absolute;
  background-color: yellow;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: none;
}
<div class="rootc">
  <div class="container">
    <canvas class="div1"></canvas>
    <div class="div2">
      <h1>This is a text</h1>
    </div>
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
</div>

but not on vue app https://codesandbox.io/p/sandbox/blue-surf-h8gm3l
on vue app, it is blinking
how do I achieve this on vue app ?