Как использовать значение слота в том же элементе, который объявил его значением слота в vue 3?

Question

Я использую безголовый пользовательский интерфейс в vue 3, и я хочу, чтобы при раскрытии раскрытия он имел border-primary класс.

вот мой текущий код:

      <div class="w-full px-4 pt-16">
      <div class="w-full max-w-4xl p-2 mx-auto bg-white rounded-2xl space-y-2">
        <disclosure
          v-for="(item,i) in contents"
          v-slot="{ open }"
          :key="i"
          as="div"
          class="border-2 border-transparent transition duration-500 hover:border-primary rounded-xl group"
          :class="[open ? 'border-primary' : '']"
        >
          <disclosure-button
            class="flex justify-between w-full px-4 py-5 text-2xl font-[futura\_round\_medium] transition duration-500 group-hover:text-primary"
            :class="[open ? 'text-primary' : '']"
          >
            <span v-text="item.question" />
            <i-mdi-chevron-up
              :class="open ? 'transform rotate-180' : ''"
              class="text-2xl"
            />
          </disclosure-button>
          <disclosure-panel class="px-5 pb-3 text-xl font-[futura\_round\_regular]" v-html="item.answer" />
        </disclosure>
      </div>
    </div>

как видите, я уже пробовал использовать :class="[open ? 'border-primary' : '']" но он не работает и дал мне такую ​​ошибку Block-scoped variable 'open' used before its declaration. в моем vscode

как мне использовать open ценность в <disclosure></disclosure>?