Bracket notation causes "undefined" to be displayed in x-model/x-bind instead of empty string.

[aduggleby]

When using bracket notation instead of dot notation the "undefined" test fails in x-bind and x-model.

Example:

<div x-data="{child:{}}">
    <input type="text" x-model="child['foo']"/>
    <input type="text" x-model="child.foo"/>
</div>

The first input will show "undefined" where as the second will show an empty string.

Issue is caused by this line in x-bind:

alpine/packages/alpinejs/src/directives/x-bind.js

Line 17 in 68094c1

if (result === undefined && expression.match(/\./)) result = ''

and this line in x-model:

alpine/packages/alpinejs/src/directives/x-model.js

Line 33 in 68094c1

if (value === undefined && expression.match(/\./)) value = ''

In both cases the bracket notation does not match the regexp for dot.

Replacing the expression match part with (expression.match(/\./) || expression.match(/\[/)) does the trick.

(nb.: Tried creating a PR with fix and tests but couldn't for the life of me get Cypress running, kept failing with "require is not defined" and ultimately had to give up. If anyone has a hint, I'll gladly give it another go.)