Issues with id bind in Alpinejs

Question

I'm using Laravel and blade components to create reusable components.

I'm trying to bind id dynamically, when component is initialized, but without success.

My blade component code is

<x-general.choices data-id="choicejs-categories" data-receiver="posts" />

<div {{ $attributes }} x-data="$store.choicesData()" @datareceiver.window="setData($event.detail)">
    <select :id="choicesjsId" class="my-js-choice form-control"></select>
</div>

My Alpine code is

document.addEventListener('alpine:init', () => {
   Alpine.store('choicesData', function () {
      return {
         choicesjsId: '',
         init () {
            this.choicesjsId = this.$root.dataset.id;
            console.log(this.choicesjsId);
            console.log(document.getElementById(this.choicesjsId));
         }

The output is:

choicejs-categories
null

Note that when I do console.log(document.getElementById(this.choicesjsId)); null is returned.

What am I doing wrong? Because is null I can't initialize choicesjs plugin.

Any tips?

Regards