vaadin-notification renderer

Hello,

I try to use the vaadin-notification in a litelement with a “dynamic” message to display.
I ve tried 2 approachs but i am unable to reach the good result.

First approach is templating : The result is always “hello”

static get properties() { 
    return {
      notificatorMessage : { type : String }
    };
  }
  
  constructor() { 
    super();
    this.notificatorMessage = "hello";
  }
  
render() {
    return html `
    <style>
      vaadin-grid vaadin-button {
        margin-left: 5px;
      }
    </style>
    <div style="margin-bottom: 10px; margin-top: 10px; margin-left: 5px">
      <vaadin-button theme="primary" id="add-btn" @click="${e => this._onAdd()}">Add</vaadin-button>
      <vaadin-notification duration="4000" position="middle">
        <template>
          <div>
            <b style="color:red">Notice</b>
            <br>
            ${this.notificatorMessage}
          </div>
        </template>
      </vaadin-notification>
    </div>
  `;
  }
  
  _onAdd() {
    this.notificatorMessage = "Coucou";
    this._notificator.open();
    }

Second approach is rendering : first click = “hello” but second click is “coucou” (better but not good)

render() {
    return html `
    <style>
      vaadin-grid vaadin-button {
        margin-left: 5px;
      }
    </style>
    <div style="margin-bottom: 10px; margin-top: 10px; margin-left: 5px">
      <vaadin-button theme="primary" id="add-btn" @click="${e => this._onAdd()}">Add</vaadin-button>
      <vaadin-notification duration="4000" position="middle" notif-message="${this.notificatorMessage}" .renderer=${this.notificatorRenderer}></vaadin-notification>
    </div>
  `;
  }
  
notificatorRenderer(root, column) {
    render(html`
      <div>
      <b>Notice</b>
      <br>
      ${column.getAttribute("notif-message")}
      </div>
    `,root);
  }
  
    _onAdd() {
    this.notificatorMessage = "Coucou";
    this._notificator.open();
    }

Any idea ? Thanks in advance