I'm facing an issue with an Alpine.js multi-select element.

when i use x-model on a select multiple along with a :selected binding on the option elements, i’m unable to select or change options in the multi-select.

<div class="col-12">
    <label class="form-label form-label-sm">
        Test Methods <span class="text-danger">*</span>
    </label>

    <select
        x-model="standard.test_methods_ids"
        class="form-control form-control-sm select2-test-methods"
        :data-uid="standard._uid"
        data-placeholder="Select Test Methods"
        multiple
        required
    >
        <template x-for="method in testMethods" :key="method.id">
            <option
                :value="method.id"
                :selected="standard.test_methods_ids.includes(method.id)"
                x-text="method.name"
            ></option>
        </template>
    </select>

    <div class="form-text">
        Selected:
        <code x-text="JSON.stringify(standard.test_methods_ids)"></code>
    </div>
</div>

form: {
    id: null,
    sample_category_id: '',
    related_entity_id: '',
    lab_test_method_id: '',
    standard_references: [
        {
            _uid: 'init_0',
            id: '',
            limit_criteria: '<',
            limit_value: '',
            unit_id: '',
            unit_text: '',
            test_methods_ids: []
        }
    ]
}

As soon as i add the :selected binding, the multi-select stops responding to user input.

Any help would be greatly appreciated. Thanks!