Setting Summernote for Laravel Livewire

Summernote for Laravel Livewire

// HTML
<div class="col-md-12">
    <div class="form-group" wire:ignore>
        <label for="desciption">Deskripsi</label>
        <textarea type="text" input="description" id="summernote" class="form-control summernote">{{ $description }}</textarea>
    </div>
</div>


// JAVASCRIPT
$('.summernote').summernote({
      tabsize: 2,
      height: 200,
      toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
      ],
      callbacks: {
          onChange: function(contents, $editable) {
          @this.set('description', contents);
      }
  }
  });

@dejury
Thank you for your code. I tried it, without totally understanding what it is doing.
The problem is I don't see that Livewire.on(...) is ever being called.
Also I have validations on the text areas that do not appear because of the wire:ignore.
I also have 2 text areas on the same page and I'm not sure how to implement 2 text-areas with your code.
Can you maybe help?

You can also use the onBlur callback instead of onChange

From my experience, I use alpine js for performance optimization.