I'm trying to hide multiple elements inside the DOM by changing shared state when window is resized.

```
<body class="font-body relative" x-data="{hideOnMobile:false}">
 <section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
   ...
  </section>
</body>

```

And when i try to

```
window.onresize = function (event) {
   let data = document.querySelector('[x-data]');

       if (window.innerWidth > 639) {
           return data.__x.$data.hideOnMobile = true;
       }
    };

```

It should change the state \*\* hideOnMobile\*\* to true but it doesn't somehow any idea?