Blazor and AlpineJS -- click away from child Component

I am trying to make a dropdown section appear when a user clicks on a card. It's a Blazor WebAssembly project using .net 5.

Alpine has cool animations, so I am trying to use that, but it gives an error when trying to put the @click.away attribute on the div containing my component.

The below gives an "unhandled error has occurred" for me:

<div x-data="{ open: false }">
     <button @click="open = !open"  class="relative">
        <p>hello</p>
     </button

     <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-full mt-2 origin-top-right rounded-md shadow-lg">
    <Card/>
     </div>
</div>

Moving the @click.away to the button works fine for me, though:

<div x-data="{ open: false }">
     <button @click.away="open = false" @click="open = !open"  class="relative">
        <p>hello</p>
     </button

     <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-full mt-2 origin-top-right rounded-md shadow-lg">
    <Card />
     </div>
</div>

The only problem with this is, I want the dropdown section to hide (with the animation) when I click outside the Card component, not the button.

Here is the simplified Card.razor:

<button>
I'm larry
</button>

I'm using basically the default project otherwise. Here is the alpinejs script:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

I've spent a good while narrowing it this far down. I'm thinking it's something with the load-order of the Javascript? Is there a way to fix that?

Does anyone know a way around this? If there is some other way to give an animation when clicking/clicking away from a component.

Thank you so much!