x-bind with a dot access expression always results in an empty string value even if the evaluated value is undefined

[TunkShif]

I've encountered this problem when I use a dot field access expression inside x-bind directive

<div x-data x-bind:data-foobar="foo.bar()"></div>

Event if the foo.bar() evaluates to undefined, the attribute data-foobar will still be set on the element.

Here is a reproduction of this: Stackblitz.

And after I've looked into the code, I found this in https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-bind.js#L31

    effect(() => evaluate(result => {
        // If nested object key is undefined, set the default value to empty string.
        if (result === undefined && typeof expression === 'string' && expression.match(/\./)) {
            result = ''
        }
    }))

It basically just check if the x-bind expression contains any dots, and if the expression also evaluates to undefined, then the result will be set to be an empty string.

So I'm wondering if this is the intended behavior or is this just a bug. 🤔

And this can be simply bypassed by using bracket call syntax like foo['bar']()