 => {
            Alpine.data('test', function () {
                return {
                    foo: { step: this.$persist(1) }
                }
            })
        })
    </script>

    <!-- B -->
    <!-- <div x-data="{ step: $history(1) }">...</div> -->

    <!-- <div x-data="{ foo: 'bar' }">
        <button @click="foo = 'baz'">Change Foo</button>
        <span x-text="foo"></span>
    </div>

    <button onclick="morph()">morph</button>

    <script>
        let div = document.querySelector('div')