How to safely interleave alpine within heex?

I was following https://benvp.co/blog/build-a-performant-autocomplete-using-phoenix-liveview-and-alpine-js blog.
I have been able to make it work, for the most part.

Down into the section where setFocus function has to be called with the index of the item, it fails.

  <%= for {option, index} <- Enum.with_index(@options) do %>
          <li
            id={"option-#{index}"}
            x-ref={"option-#{index}"}
            x-on:click="close"
            @mouseenter="setFocus(#{index})"
            :class='{"focus": focus === "#{index}"}'
            phx-click="select"
            phx-target={@myself}
            phx-value-id={"#{option.id}"}
            phx-value-name={"#{option.name}"}
            class="option relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900"
            >

value of @mouseenter attribute is not treated as a template to be rendered. Instead it appears as follows:

<li 
id="option-0" 
x-ref="option-0" 
x-on:click="close" 
@mouseenter="setFocus(#{index})" 
:class="{&quot;focus&quot;: 
focus === &quot;#{index}&quot;}" 
phx-click="select" 
phx-target="1" 
phx-value-id="1" 
phx-value-name="Awesome Inc" 
class="option relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900">

the value of index does not get replaced.
Is there a workaround for this?

Thanks.