Alpine.data issue

[rugged wave]

hello, i have a question, how can i use the Alpine.data() with astro? the code:

<script>
import Alpine from 'alpinejs';
document.addEventListener('alpine:init', () => {
Alpine.data('utils', () => ({
buttonStyles: buttonStyles(),
}));
});
window.Alpine = Alpine;

Alpine.start();

</script>

<button
  hx-get="http://localhost:3001/hello"
  hx-swap="outerHTML"
  x-data="utils"
  @mouseenter="hovered = true"
  @mouseleave="hovered = false"
  :class="utils ? 'buttonStyles()' : 'buttonStyles()'"
>
  hello
</button>

error:
Uncaught ReferenceError: utils is not defined
anonymous http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052 line 571 > AsyncFunction:3
generateEvaluatorFromString http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052:589
tryCatch http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052:513
handler2 http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052:2774
reactiveEffect http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052:1681
effect2 http://localhost:3000/node_modules/.vite/deps/alpinejs.js?v=147de052:1656
...

[grand shard]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.