Alphinejs not updating the DOM after a user event

I am working on project where I used express and pug as the template engine

extends layout

block content
  div(class="p-2 main h-screen fixed"  id="main")
   a(href="/rooms") rooms
   div(class="border p-2 text-center shadow-xl h-[15vh] m-4"  x-data="{main: false,desc:true,toggle:()=>{this.main = !this.main;this.desc=!this.desc ;alert(this.desc) }}")
     button(@click="toggle" class="border rounded-xl shadow") Toggle
     h1=room.name
     div(class="p-2 m-2 h-[75vh]" x-show="main")
       rooms-msg(messages=room.messages)
       input(type="hidden" id="user" value=user )
       input(type="hidden" id="room" value=room )
       input(name="message" id="message" placeholder="send new message ")
       button(class="p-2 rounded shadow" id="send") Send
     div(class="m-2 p-2" x-show="desc" x-transition)
       h1=room.name
       h3 Members
       each member in room.members
         if room.admin.displayName === member.displayName 
          div.p-2
           h4=member.displayName
           p  Admin
         else
            div.p-2
              h1=member.displayName
  script.
        document.addEventListener("alpine:init", ()=> {
        
         })
  
  script(src="/javascripts/pages/room.js")
  
  
  

When the user clicks the toggle button,the values seems to change respectively but the DOM doesn't update,I tried swapping the values of main and desc,It was then I noticed that only their initial state affects the DOM