When reloading a page with an url, some elements are activated multiple times

With a simple page which have 2 nested views like following, if we go to page http://localhost:8001/messages/@https~@~_~_api~!alpha~!happy-dev~!fr~_users~_alex~_, we can see this in the console:

// actual
activate circle-display
activate messages-display
activate circle-display

// expected
activate messages-display
activate circle-display

Code example:

    <sib-router>
      <sib-route name="circle" use-id>Circle</sib-route>
      <sib-route name="messages" use-id>Messages</sib-route>
    </sib-router>

    <div id="circle">
      <h1>CIRCLE</h1>

      <sib-router default-route="circle-detail">
        <sib-route name="circle-detail">Details</sib-route>
      </sib-router>

      <div id="circle-detail">
        <sib-display id="circle-display" bind-resources fields="email"></sib-display>
      </div>
    </div>


    <div id="messages">
      <h2>MESSAGE</h2>

      <sib-router default-route="messages-detail">
        <sib-route name="messages-detail">Details</sib-route>
      </sib-router>

      <div id="messages-detail">
        <h3>Détails messages</h3>
        <sib-display id="messages-display" bind-resources fields="email"></sib-display>
      </div>
    </div>

    <script>
      document.getElementById('circle-display').addEventListener('populate', () => {
        console.log("activate circle-display");
      })
      document.getElementById('messages-display').addEventListener('populate', () => {
        console.log("activate messages-display");
      })
    </script>