如何在Alpine.js中执行确认删除模式

<script src="https://cdn.jsdelivr.net/npm/alpinejs@2"></script>

<button x-data="{ showConfirmation: false }" @click="showConfirmation = true">删除</button>

<div x-data="{ showConfirmation: false }">
  <button @click="showConfirmation = true">删除</button>
  
  <div x-show="showConfirmation">
    <p>确定要删除吗？</p>
    <button @click="deleteItem()">确认删除</button>
    <button @click="showConfirmation = false">取消</button>
  </div>
</div>

<div x-data="{ showConfirmation: false }">
  <button @click="showConfirmation = true">删除</button>
  
  <div x-show="showConfirmation">
    <p>确定要删除吗？</p>
    <button @click="deleteItem()">确认删除</button>
    <button @click="showConfirmation = false">取消</button>
  </div>
</div>

<script>
  function deleteItem() {
    // 执行删除操作的代码
    console.log("执行删除操作");
  }
</script>