Let’s say I have the following in my liveview template:

my_template.html.leex
<div phx-hook="myHook">
  <div
    x-data="{inputvalue=''}"
    x-init="
      console.log('I AM INITING')
    "
  >
  <input x-model="inputValue">
  </div>
</div>
<script>
  document.addEventListener('alpine:init', () => console.log('INIT FROM SCRIPT TAG!'))
</script>

myHook.js
hooks.myHook = {
  mounted () {
    console.log('HOOK MOUNTED')
    document.addEventListener('alpine:init', () => console.log('INIT FROM HOOK'))
  }
}

My output is:

INIT FROM SCRIPT TAG
I AM INITING
I AM INITING
HOOK MOUNTED
I AM INITING
I AM INITING

1. Why is the x-init running 4 times and how can I make it only run once?
2. How can I get my hook to execute before x-init or the alpine:init event runs?