data-hs-overlay-keyboard="false" not working with NuxtJS about preline HOT 4 CLOSED

<template>
  <div>
    <button
      type="button"
      class="none"
      data-hs-overlay="#articleDetailsModal"
    ></button>
    
    <div
      id="articleDetailsModal"
      class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto [--overlay-backdrop:static]"
      data-hs-overlay-keyboard="false"
    >
      <div
        class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"
      >
        <div
          class="w-full max-h-full overflow-hidden flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]"
        >
          <div class="flex justify-between items-center py-3 px-4">
            <div class="flex-col">
              <h3
                v-show="!loading && article"
                class="truncate text-lg font-bold text-gray-800 dark:text-white"
              >
                {{ article.title }}
              </h3>
              <p class="text-xs text-gray-500 dark:text-gray-500">
                {{ $dayjs(article.created_at).fromNow() }} by
                {{ article.user?.name }}
              </p>
            </div>
            <div v-show="loading" class="w-full flex animate-pulse">
              <div class="ms-4 mt-2 w-full">
                <h3
                  class="h-4 bg-gray-200 rounded-full dark:bg-gray-700"
                  style="width: 40%"
                >
                  &nbsp;
                </h3>
              </div>
            </div>
            <button
              type="button"
              class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700"
              @click="closeArticleDetails()"
            >
              <span class="sr-only">Close</span>
              <span class="flex-shrink-0 size-4 i-[mdi--close]"></span>
            </button>
          </div>
          <div class="p-4 overflow-auto">
            <div
              v-show="!loading && article"
              class="mt-1 text-gray-500 dark:text-gray-400"
            >
              <div v-html="article.content"></div>
            </div>
            <div v-show="loading" class="w-full flex animate-pulse">
              <div class="ms-4 mt-2 w-full">
                <ul class="mt-5 space-y-3 list-none">
                  <li
                    class="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"
                  ></li>
                  <li
                    class="w-1/2 h-4 bg-gray-200 rounded-full dark:bg-gray-700"
                  ></li>
                  <li
                    class="w-1/4 h-4 bg-gray-200 rounded-full dark:bg-gray-700"
                  ></li>
                </ul>
              </div>
            </div>
            <div
              class="mt-12 py-3 flex items-center text-sm text-gray-800 after:flex-1 after:border-t after:border-gray-200 after:ms-6 dark:text-white dark:after:border-gray-600"
            >
              Comments
            </div>
            <CommentsSection
              :article-id="article?.id ?? 0"
              :loading="loading"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>