title: looping through nested array in alpinejs
body: <p>Nested loop doesn't work. I've checked several times and can't find the problem. My code is :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"&gt;&lt;/script&gt;
       
  &lt;div x-data="{ groups: 
    [{
       name:'size',
       options:['s','m']
    },
    {
       name:'color',
       options:['red','blue']
    }]
  }"&gt;
    &lt;template x-for="group in groups"&gt;
      &lt;h2 x-text="group.name"&gt;&lt;/h2&gt;
      &lt;div&gt;
        &lt;template x-for="option in group.options" :key="option"&gt;
          &lt;div x-text="option"&gt;&lt;/div&gt;
        &lt;/template&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help is appreciated. Thank you.</p>