Using alpine in a script tag inside of a filament modal

I am trying to write a small custom infolist entry component. I am using filaments modals outside of a filament panel and its working great. But now inside this modal, I am adding my custom filament component and inside of that I want to use alpine.

I can use it inline x-data="{foo = 'bar'} but using Alpine.data('foo', {}) just simply wont work. It just tells me it cannot find the data (I think)

Alpine Expression Error: callback.bind is not a function

Expression: "modalData"

I tried adding it inside the component inside a script tag

@script
<script>
Alpine.data('modalData', {
    isOpen: false,
    image: '',
    open(img)  {
        console.log(img)
        this.isOpen = true;
        this.image = img;
    }
})
</script>
@endscript

I also tried adding it directly to my app.js but still the exact same error. :/