Cannot read properties of null (reading '_x_dataStack')

[Stripeberry]

Code example (codepen):

    <div x-data='{content:"some text"}' id="content">
      <div x-text="content"></div>
    </div>
    <button>Run Morph</button>
    <script>
        document.querySelector("button").addEventListener("click", () => {
          let el = document.getElementById("content");
          Alpine.data("additional", () => ({
            message: "New text!",
            init() {
              console.log("additional init");
            }
          }));
          Alpine.morph(
            el,
            `
              <div x-data="additional">
                <h2>Updated</h2>
                <div x-text="message"></div>
              </div>
           `
          );
        });
    </script>

Twice click button "Run Morph", get error: "Cannot read properties of null (reading '_x_dataStack')"

The following example also does not work (codepen):

    <div x-data='{content:"some text"}' id="content">
      <div x-text="content"></div>
    </div>
    <button>Run Morph</button>
    <script>
        document.addEventListener('alpine:init', () => {
          Alpine.data("additional", () => ({
            message: "New text!",
            init() {
              console.log("additional init");
            }
          }));
        })
        
        document.querySelector("button").addEventListener("click", () => {
          let el = document.getElementById("content");
        
          Alpine.morph(
            el,
            `
              <div x-data="additional">
                <h2>Updated</h2>
                <div x-text="message"></div>
              </div>
           `
          );
        });
    </script>

We see error: "Alpine Expression Error: additional is not defined"