在这个 Laravel 和 Alpine 应用程序中导致“l 不是函数”错误的原因是什么？

Question

我正在为博客应用程序开发评论和回复系统，使用Laravel 8和Alpine.js 3.

在每条评论下都有一个隐藏的表单，当用户单击“回复”链接时应该会显示该表单：

<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<ol class="commentlist infinite-scroll">
  <li class="depth-1 comment" x-data="{ showForm: false }">
    <div class="comment__content">
      <div class="comment__info">
        <div class="comment__author">Ioana Popa</div>
        <div class="comment__meta">
          <div class="comment__time">2nd Jan 2023</div>
          <div class="comment__reply">
            <a class="comment-reply-link" href="#0" x-on:click="showForm = !showForm">
              <span x-show="!showForm">Reply</span>
              <span x-show="showForm" style="display: none;">Cancel</span>
            </a>
          </div>
        </div>
      </div>
      <div class="comment__text">
        <p>In et asperiores.</p>
      </div>
    </div>

    <form x-show="showForm" x-transition="" method="post" action="https://larablog.com/comment/submit" autocomplete="off" style="display: none;">
      <input type="hidden" name="_token" value="T14cpjuEYIYG27ggdi3KLI5KUXCDBMNPTvafveon">
      <fieldset>

        <input type="hidden" name="article_id" value="300">
        <input type="hidden" name="parent_id" value="5">

        <div class="message form-field">
          <textarea name="msg" id="message" class="h-full-width" placeholder="Your comment"></textarea>

        </div>
        <br>
        <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
      </fieldset>
    </form>
  </li>

  <li class="depth-1 comment" x-data="{ showForm: false }">
    <div class="comment__content">
      <div class="comment__info">
        <div class="comment__author">Razvan Zamfir</div>
        <div class="comment__meta">
          <div class="comment__time">2nd Jan 2023</div>
          <div class="comment__reply">
            <a class="comment-reply-link" href="#0" x-on:click="showForm = !showForm">
              <span x-show="!showForm">Reply</span>
              <span x-show="showForm" style="display: none;">Cancel</span>
            </a>
          </div>
        </div>
      </div>
      <div class="comment__text">
        <p>Commodi hic cumque.</p>
      </div>
    </div>

    <form x-show="showForm" x-transition="" method="post" action="https://larablog.com/comment/submit" autocomplete="off" style="display: none;">
      <input type="hidden" name="_token" value="T14cpjuEYIYG27ggdi3KLI5KUXCDBMNPTvafveon">
      <fieldset>

        <input type="hidden" name="article_id" value="300">
        <input type="hidden" name="parent_id" value="41">

        <div class="message form-field">
          <textarea name="msg" id="message" class="h-full-width" placeholder="Your comment"></textarea>

        </div>
        <br>
        <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
      </fieldset>
    </form>
  </li>
</ol>

问题：

表单的可见性没有切换，控制台抛出错误：

Uncaught (in promise) TypeError: l is not a function

问题：

1. 错误的原因是什么？
2. 修复它最可靠的方法是什么