Trix editor in Vue app not serializing attachment captions unless manually "committed"

I'm using the Trix editor in a Vue.js application and running into an issue with image attachments and captions not being properly serialized when saving a comment.

When I insert an image attachment and add a caption but save the comment immediately after (without pressing "Enter" to exit the caption input), the resulting HTML is broken or missing the caption entirely. Instead, the caption-related DOM nodes include editing artifacts like elements and extra blocks with metadata only.

However, if I press "Enter" twice—once to exit the caption input and once more to create a new line—and then save, the caption is properly serialized and rendered as expected.

This is the ideal case

<div>
  <!--block-->
  Totally new comment with correct caption
  <br>
  <span data-trix-cursor-target="left" data-trix-serialize="false"></span>
  
  <figure
    contenteditable="false"
    data-trix-attachment='{
      "attachmentId": 9080,
      "contentType": "image/png",
      "filename": "Screenshot from 2025-03-25 13-05-28.png",
      "filesize": 313084,
      "height": 1080,
      "target": "_blank",
      "url": "https://.........",
      "width": 1920
    }'
    data-trix-content-type="image/png"
    data-trix-id="678678"
    data-trix-attributes='{
      "caption": "qwerty",
      "presentation": "gallery"
    }'
    class="attachment attachment--preview attachment--png"
  >
    <img
      src="https://....."
      data-trix-mutable="true"
      width="1920"
      height="1080"
      data-trix-store-key="......."
    >
    <figcaption class="attachment__caption attachment__caption--edited">
      qwerty
    </figcaption>
  </figure>
  
  <span data-trix-cursor-target="right" data-trix-serialize="false"></span>
  <br>
  some text
</div>

This is the faulty case

<div>
  <!--block-->
  <span data-trix-cursor-target="left" data-trix-serialize="false"></span>

  <figure
    contenteditable="false"
    data-trix-attachment='{
      "attachmentId": 5677,
      "contentType": "image/png",
      "filename": "Screenshot from 2025-03-25 13-05-28.png",
      "filesize": 313084,
      "height": 1080,
      "target": "_blank",
      "url": "https://.....",
      "width": 1920
    }'
    data-trix-content-type="image/png"
    data-trix-id="890890"
    data-trix-attributes='{
      "presentation": "gallery"
    }'
    class="attachment attachment--preview attachment--png"
    data-trix-mutable="true"
  >
    <img
      src="https://...."
      data-trix-mutable="true"
      width="1920"
      height="1080"
      data-trix-store-key="...."
    >

    <figcaption class="attachment__caption attachment__caption--editing">
      <textarea
        placeholder="Add a caption…"
        data-trix-mutable="true"
        class="attachment__caption-editor"
        style="height: 17px;"
      ></textarea>
      <textarea
        placeholder="Add a caption…"
        data-trix-mutable="true"
        class="attachment__caption-editor trix-autoresize-clone"
        tabindex="-1"
      ></textarea>
    </figcaption>

    <figcaption class="attachment__caption" style="display: none;">
      <span class="attachment__name">Screenshot from 2025-03-25 13-05-28.png</span>
      <span class="attachment__size">305.75 KB</span>
    </figcaption>

    <div data-trix-mutable="true" class="attachment__toolbar">
      <div class="trix-button-row">
        <span class="trix-button-group trix-button-group--actions">
          <button
            title="Remove"
            data-trix-action="remove"
            class="trix-button trix-button--remove"
          >
            Remove
          </button>
        </span>
      </div>

      <div class="attachment__metadata-container">
        <span class="attachment__metadata">
          <span
            title="Screenshot from 2025-03-25 13-05-28.png"
            class="attachment__name"
          >
            Screenshot from 2025-03-25 13-05-28.png
          </span>
          <span class="attachment__size">305.75 KB</span>
        </span>
      </div>
    </div>
  </figure>

  <span data-trix-cursor-target="right" data-trix-serialize="false"></span>
</div>

Things I've noticed:

• The issue seems to be that the caption is still in an "editing" state at the time of serialization.

• Pressing enter appears to commit or finalize the caption content.

• The underlying data-trix-attributes doesn't include the caption unless this happens.

What could be causing this to happen?