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