title: Alpine.js: How do I access x-data from a function in an external file?
body: <p>I'm just starting out with Alpine.js, I understand the basics but I'm having trouble applying them when moving functions outside of inline script tags.</p>
  <p>For example, in <code>index.html</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div x-data=&quot;{ loading: false }&quot;/&gt;
    &lt;button
      onClick=&quot;post()&quot;
      :class=&quot;{ 'active': loading === true }&quot;
    &gt;
      Post Comment
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>if <code>post()</code> was in <code>main.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const postComment = () =&gt; {
    this.loading = true;
  };
  
  window.postComment = postComment;
  </code></pre>
  <p>How do I make it so that <code>this</code> isn't undefined?</p>
  <p>I've found plenty of examples where functions are kept within <code>index.html</code>, but none where they're in a separate file.</p>