Javascript 不同的状态取决于Alpine.js的屏幕大小

我需要小于768px的屏幕上的

x-on:mouseenter=“itemActive={{index}}”和
x-on:mouseleave=“itemActive=false”
状态为
x-on:click=“itemActive={{index}”
和
x-on:click.away=“itemActive=false”
。下面的代码与较大屏幕的悬停部分完美配合，但似乎无法理解如何使其在不同屏幕尺寸下工作

我正在使用Twig、Tailwind和Alpine.JS

<div x-data="{itemActive: false}" class="w-full pb-12 mt-5 overflow-x-hidden overflow-y-scroll md:flex md:flex-wrap md:w-auto md:mt-0 md:pb-0 md:overflow-visible">

  {% for item in menu.items %} {% set index = loop.index0 %}

  <div x-on:mouseenter="itemActive = {{ index }}" x-on:mouseleave="itemActive = false" class="flex flex-wrap w-full md:block md:w-auto {{ item.classes|join(' ') }}">

    <a :class="{'bg-gray-900' : itemActive === {{ index }}}" class="flex flex-wrap items-center justify-between w-full h-10 px-4 cursor-pointer md:h-14 md:justify-start md:w-auto" href="{{ item.link }}">
      {{ item.title }}      
      {% if item.children %}
        <span><i class="pl-2 fa fa-caret-down"></i></span>
      {% endif %}
    </a>

    {% if item.children %}
    <div x-show="itemActive === {{ index }}" class="absolute z-10 w-48 bg-gray-900">
      {% for child in item.children %}
      <a class="flex flex-wrap items-center h-12 px-4 transition-colors cursor-pointer md:h-14 hover:bg-gray-700" href="{{ child.link }}" >
        {{ child.title }}
      </a>
      {% endfor %}      
    </div> 
    {% endif %}

  </div>

  {% endfor %}
  
</div>


{%for menu.items%}{%set index=loop.index0%}
{%if item.children%}
{item.children%中的子项为%1}
{%endfor%}
{%endif%}
{%endfor%}

有什么建议吗