having a problem with x-data="function" not loading function

[TerrePorter]

I am getting the error, "Alpine Expression Error: toggle is not defined".

I added this 'window.showWindow = showWindow;' thinking it was some scope problem but that didn't work.

I set up a CodePen to play and I have tried everything I can think of and it just won't load the function.

https://codepen.io/terreporter/pen/OJzaygq?editors=1111

can anyone tell me what I have done wrong?

<div x-data="showWindow">
    <button @click="toggle()">Toggle Content</button>
 
    <div x-show="isOpen">
        Content...
    </div>
</div>

function showWindow() {
  return {
    open: false,
    get isOpen() {
      return this.open;
    },
    toggle() {
      this.open = !this.open;
    }
  };
}
window.showWindow = showWindow;

[TerrePorter]

It seems to be a problem with CodePen. I found another pen that had x-data="function" and that one was working. A comparison between their page and mine. I used the add external script in settings and they had directly included it in the HTML.

So I did some testing if you add alpine.js using the settings menu, it will fail to execute any functions using x-data="function" but it would run scripts on the page. If I added the script, the same CDN, using a script tag to the HTML it would work as expected and the x-data=" function" runs