A-frame physics system: adding dynamic objects on click

Question

I have a coin object that I want to instantiate on every click and make them drop from the clicked position. Within the scene I have:

 <a-assets>
    <a-asset-item id="coin" src="./assets/models/coin-blue.glb"></a-asset-item>
    <a-mixin
      id="coin-mixin"
      gltf-model="#coin"
      rotation="90 0 0"
      scale="0.2 0.2 0.2"
      drop-coin
      ammo-body="type: dynamic;emitCollisionEvents:true;"
      ammo-shape="type: sphere; fit: manual; sphereRadius:0.5;"></a-mixin>
  </a-assets>

and then in the click listener, I want to have something like

onClick() {
    const boardEl = document.getElementById('boardObj') // parent entity
    const pos = this.el.object3D.position
    const x = document.createElement('a-entity')
    x.setAttribute('gltf-model', '#coin')
    x.setAttribute('visible', 'false')
    boardEl.appendChild(x)

    x.addEventListener('model-loaded', () => {
      x.setAttribute('mixin', 'coin-mixin')
      x.object3D.position.set(pos.x, pos.y, pos.z)
      x.setAttribute('visible', 'true')
    })
  },

If I do this without the model-loaded I can see the entity dropping but without the blue model. How can I set the amno-body dynamically or start its drop after the model has loaded?