Setting draft value of rich text area with javascript (Trix/ActiveText)

I have a 'save draft' button which successfully saves message content as a draft. When the page loads with a draft, I add the following script to the HTML:

<% if @draft_msg.present? %>
  <script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<%= @draft_msg.content %>`;
  </script>
<% end %>

This renders as something like this:

<script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<div class="trix-content">
  <div>zzzzzzzzzzzzzzzzz</div>
</div>
`;
</script>

When I was working on the page and refreshing between edits I thought I had everything working, as my draft value was present inside my rich text editor. However when I go from my index page to a 'Talk' page (which has the rich text editor and a draft), the innerHTML is not changed.

The script is still loaded and looks like this:

<script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<div class="trix-content">
  <div>zzzzzzzzzzzzzzzzz</div>
</div>
`;
  </script>

If I refresh the page it is working again!

I am not sure why this is.