How to execute x-data commands in alpine js library when out of state?

Question

How do I expand the div when the button is out of state?

<div x-data="{ open: false }">
    <span x-show="open">
      Content...
    </span>
</div>


<button @click="open = true">Expand</button>

Answer 1

one way would be to keep the state in the global $store

<script>
  document.addEventListener('alpine:init', () => { Alpine.store("mystate", { open: false })})
</script>
  <div x-data>
    <span x-show="$store.mystate.open">
      Content...
    </span>
  </div>


<button x-on:click="$store.mystate.open = !$store.mystate.open">Toggle</button>