                 })
                },

                foo: 'bar'
            }))
        })
    </script>

    <div x-data="component">
        <span x-text="foo"></span>

        <button>click me</button>
    </div>

    <div x-data="{ show: false }">
        <button @click="show = true">Show</button>

        <h1 x-show="show" @click.away="show = false">h1</h1>

        <h2>h2</h2>
    </div>

    <div x-data x-init="$refs.blab.textContent = 'bar'">
        <div x-data>
            <span @click="$refs">