using getter in x-bind

[capymind]

Hi,
Alpine.js is literally awesome.
But I am not awesome at all.

<div x-data="{ 
    sum_of_items: 0, 
    get is_valid_sum_of_items() { 
        return this.sum_of_items === 100
    }
}">
    <div x-show="is_valid_sum_of_items">
        This block work correctly depending on value of `sum_of_items` in `x-data`
    </div>
    <div :class="is_valid_sum_of_items ? 'text-valid-green' : 'text-invalid-red'">
        This block has a problem. `is_valid_sum_of_items` getter does not invoked I guess `undefined`. So
    </div>
    <div :class="sum_of_items === 100 ? 'text-valid-green' : 'text-invalid-red'">
       This is a workaround. Direct use of property is totally working its way.
    </div>
</div>

This is a kind of silly example because there is no reason to use getter.
But the point is that is there a way to invoke(use) getter in binding class?

Many thanks in advance!!

[capymind]

Sorry.... This is 100% my fault. The code above work correctly...

Original wrong code snippet is below..

   <div :class="is_valid_sum_of_items === 100 ? 'text-valid-green' : 'text-invalid-red'">
        This block has a problem. `is_valid_sum_of_items` getter does not invoked I guess `undefined`. So
    </div>

is_valid_sum_of_items getter already return true or false based on property sum_of_items in x-data. so is_valid_sum_of_items === 100 is true === 100 or false === 100. :(