AlpineJS x-show not updating with state change

I have a problem whereby I have a notifications panel that should open when the button is clicked on. When I click on the button, nothing happens. There are no errors in console either.

<body>
    <div x-data="Setup()">
        <button
        @click="isNotificationsPanelOpen=true"
        >BUTTON</button>

        <section
        x-ref="notificationsPanel"
        x-show="isNotificationsPanelOpen"
        @keydown.escape="isNotificationsPanelOpen=false">
            NOTIFICATIONS PANEL
        </section>
    </div>

    <script>
    function Setup()
    {
        return {
            loading: true,
            isNotificationsPanelOpen: false,
            openNotificationsPanel() {
                this.isNotificationsPanelOpen = true;
                console.log('openNotificationsPanel called');
                console.log(this.isNotificationsPanelOpen);
                this.$nextTick(() => {
                    this.$refs.notificationsPanel.focus()
                })
            }
        }
    }
    </script>

    @stack('modals')

    @livewireScripts
</body>

Instead of using @click="isNotificationsPanelOpen=true" I also tried using @click="openNotificationsPanel", I saw the console.log messages by doing that but the panel still remained as display:none.

I'm fairly new to AlpineJS but I am convinced this should work, please can someone tell me why it doesn't?