Controlling form fields via other HTML elements using alpine's x-model

Hey, so new to this plugin and it's working great so far. Thanks for your work on this. I have a bit of a special use case - not sure if this has been talked about before. But, in the case of a <select> element, I'm rendering a set of <div> elements over it to allow for better UI styling. So via Alpine, I'm controlling the set value of the <select> element by binding it to a model via x-model which is ultimately controlled by interacting with the enhanced <div> elements.

In this case, the validation seems to work, however, when a value is finally selected, it's not removing the dynamically added data-error attributes from the elements it appends them to, so it looks like there is still an error. However, even though it doesn't remove them, the value of the select element is correctly set, the validation does pass and the form submits. Am I perhaps missing a step in this scenario to get the error attributes to clear out?

Here's the code and some screenshots of what I'm working with right now (the select element is hidden via CSS.) Let me know if you might have any insight to this of if what I'm trying to do is possible. TIA!

            <div class="focal-field focal-select-lg" x-data="initSelect($refs.car, 'car')">
                <label for="car">Car</label>
                <div class="focal-select-div-lg" :class="(opened) ? 'focal-select-div-lg-opened' : ''" @click="opened = !opened; searched = ''" tabindex="1" @keydown.escape="opened = false; $el.scrollTop = 0; searched = ''" @keydown.enter="opened = false; $el.scrollTop = 0; searched = ''" @keypress="search($el, $event, 'car')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="select-dropdown-arrow"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
                    <div x-text="car != '' ? car : rows[0].name"></div>
                    <template x-for="row in rows">
                        <div
                            :data-value="row.value"
                            @click="car = row.value; $el.parentElement.scrollTop = 0"
                            x-text="row.name"
                        ></div>
                    </template>
                </div>
                <select name="car" id="car" x-model="car" x-ref="car" required="required" data-error-msg="Car is required.">
                    <option value="">----</option>
                    <option value="Acura">Acura</option>
                    <option value="Aston Martin">Aston Martin</option>
                    <option value="Audi">Audi</option>
                    <option value="Chevrolet">Chevrolet</option>
                    <option value="Dodge">Dodge</option>
                    <option value="Ferrari">Ferrari</option>
                    <option value="Ford">Ford</option>
                    <option value="Honda">Honda</option>
                    <option value="Infiniti">Infiniti</option>
                    <option value="Jaguar">Jaguar</option>
                    <option value="Lamborghini">Lamborghini</option>
                    <option value="Lexus">Lexus</option>
                    <option value="Nissan">Nissan</option>
                    <option value="Toyota">Toyota</option>
                    <option value="Volkswagon">Volkswagon</option>
                </select>
            </div>

Data Error Attributes data-error

Error Focus - Value Not Set error-focus-1

Error Focus - Value Set - Error Attributes Don't Clear error-focus-2

Select Value is Set; Submission Works submit

colinaut / alpinejs-plugin-simple-validate

Controlling form fields via other HTML elements using alpine's x-model #27