x-show behaves unexpectedly

[gshrman]

When I run the test below both divs with x-show eventually appear at the same time. Based on the logic in x-show I would think that should never happen.
Here's a codepen - https://codepen.io/gshrman/pen/rNYpdaK

<div x-data="counter">
  <button @click="test">RUN TEST</button>
  <!-- the following two divs should never show at the same time...right?? -->
  <div x-show="count === 0">COUNT IS ZERO</div>
  <div x-show="count !== 0">COUNT IS NOT ZERO</div>
<div>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('counter', () => ({
    count: 0,

    async test () {
      for (i=0; i<10; i++) { 
        await this.simulate_request(i);
      }
    },
 
    async simulate_request (i) {
      this.count++;
      // simulate network request
      await new Promise(r => setTimeout(r, Math.random()*2000));
      this.count--;
    },
  }))
});
</script>