Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

In this lesson, we see how the x-model directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an x-bind directive for the input value, as well as an @input event listener which, thanks to an access to the browser's native events via the $event magic property, sets the state value to $event.target.value.