Как правильно инициализировать событие на динамической разметке?

<div class="element" data-component="element">
    <button class="element__button" data-element-ref="button">button</button>

    <div class="element__template" data-element-ref="template">
    </div>
</div>

const template = `
  <div class="element__content">
    template
    
    <button class="element__content-button" data-element-ref="template-button">button</button>
  </div>
`
class Element {
  constructor(el) {
    this.el = el;

    this.button = this.el.querySelector('[data-element-ref="button"]');
    this.template = this.el.querySelector('[data-element-ref="template"]');

    this.init();
  }

  init() {
    this.button.addEventListener('click', this.onClickPrimaryButton);
  }

  onClickPrimaryButton = () => {
    this.template.innerHTML += template;

    this.buttonElement = this.el.querySelectorAll('[data-element-ref="template-button"]');

    this.buttonElement.forEach((button) => {
      button.addEventListener('click', this.onClickButtonElement);
    });
  }

  onClickButtonElement = (event) => {
    console.log(event.target);
  }
}

const element = [...document.querySelectorAll('[data-component="element"]')].map(n => new Element(n));