title: Alpine JS with local storage - x-data showing old/wrong value after page refresh
body: <p>I am trying to toggle dark mode using Alpine JS saving the value in local storage. But when I toggle the dark mode on and off again and refresh the page, the value in the local storage shows 'false' (which is expected) but the x-data shows the wrong value which is 'true'.</p>
  <pre><code>&lt;!-- https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js
  &lt;body 
    x-data=&quot;{darkMode: localStorage.getItem('dark')}&quot;
    x-init=&quot;$watch('darkMode', val =&gt; localStorage.setItem('dark', val))&quot;
    x-bind:class=&quot;{ 'dark': darkMode }&quot;
  &gt;
    
    &lt;p x-show=&quot;darkMode&quot;&gt;Dark Mode: ON&lt;/p&gt;
    &lt;p x-show=&quot;!darkMode&quot;&gt;Dark Mode: OFF&lt;/p&gt;
    
    &lt;button
      @click=&quot;darkMode = !darkMode&quot;
    &gt;Toggle Dark Mode&lt;/button&gt;
    
  &lt;/body&gt;
  </code></pre>
  <p>Check this fiddle for demo: <a href="https://jsfiddle.net/darpan_kulkarni/kpr5de0a" rel="nofollow noreferrer">https://jsfiddle.net/darpan_kulkarni/kpr5de0a</a></p>
  <ol>
  <li>Turn on the dark mode</li>
  <li>Turn off the dark mode</li>
  <li>Refresh the page, it will still show dark mode ON</li>
  </ol>
  <p>Any help would be appreciated.</p>