Fix x-model sync for grouped dynamic options

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

@@ -184,7 +184,7 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
             el._x_forceModelUpdate(getValue())
         })
 
-        observer.observe(el, { childList: true })
+        observer.observe(el, { childList: true, subtree: true })
 
         cleanup(() => observer.disconnect())
     }

packages/docs/src/en/directives/model.md

@@ -259,25 +259,31 @@ Colors: <span x-text="color"></span>
 <!-- END_VERBATIM -->
 
 <a name="dynamically-populated-select-options"></a>
-### Dynamically populated Select Options
+### Dynamically populated select options
+
+`x-model` keeps the selection synchronized when options are added or removed dynamically, including options nested inside an `<optgroup>`.
 
 ```alpine
 <select x-model="color">
-    <template x-for="color in ['Red', 'Orange', 'Yellow']">
-        <option x-text="color"></option>
-    </template>
+    <optgroup label="Colors">
+        <template x-for="color in ['Red', 'Orange', 'Yellow']">
+            <option x-text="color"></option>
+        </template>
+    </optgroup>
 </select>
 
 Color: <span x-text="color"></span>
 ```
 
 <!-- START_VERBATIM -->
 <div class="demo">
-    <div x-data="{ color: '' }">
+    <div x-data="{ color: 'Orange' }">
         <select x-model="color">
-            <template x-for="color in ['Red', 'Orange', 'Yellow']">
-                <option x-text="color"></option>
-            </template>
+            <optgroup label="Colors">
+                <template x-for="color in ['Red', 'Orange', 'Yellow']">
+                    <option x-text="color"></option>
+                </template>
+            </optgroup>
         </select>
 
         <div class="pt-4">Color: <span x-text="color"></span></div>

tests/cypress/integration/directives/x-model.spec.js

@@ -738,6 +738,37 @@ test('x-model initializes multiple select values rendered with x-for', html`
     get('option[value="Yellow"]').should('be.selected')
 })
 
+test('x-model initializes select values rendered with x-for inside an optgroup', html`
+    <div x-data="{ color: 'Orange' }">
+        <select x-model="color">
+            <optgroup label="Colors">
+                <template x-for="color in ['Red', 'Orange', 'Yellow']">
+                    <option :value="color" x-text="color"></option>
+                </template>
+            </optgroup>
+        </select>
+    </div>
+`, ({ get }) => {
+    get('select').should(haveValue('Orange'))
+})
+
+test('x-model re-syncs when x-for adds a matching option inside an optgroup', html`
+    <div x-data="{ colors: ['Red', 'Blue'], color: 'Green' }">
+        <select x-model="color">
+            <optgroup label="Colors">
+                <template x-for="colorOption in colors" :key="colorOption">
+                    <option :value="colorOption" x-text="colorOption"></option>
+                </template>
+            </optgroup>
+        </select>
+
+        <button @click="colors = ['Orange', 'Green']">Change</button>
+    </div>
+`, ({ get }) => {
+    get('button').click()
+    get('select').should(haveValue('Green'))
+})
+
 test('x-model does not fire change handlers when x-for options initialize', html`
     <div x-data="{ color: 'Orange', changes: 0 }">
         <select x-model="color" @change="changes++">