Аккордеон на Vue

<div id="app">
  <p class="app__title">Часто задаваемые вопросы</p>
  <div class="app__item" v-for="item in items" :class="{expanded: item.isExpanded}">
    <svg v-show="item.isExpanded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
      <path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" />
    </svg>
    <div class="app__item-qa">
      <p class="app__item-q">{{item.question}}</p>
      <p v-show="item.isExpanded" class="app__item-a">{{item.answer}}</p>
    </div>
    <div class="app__item-btns">
      <button class="app__item-btn" @click="item.isExpanded = !item.isExpanded">
        <svg v-if="!item.isExpanded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10" />
          <path d="M12 8v8" />
          <path d="m8 12 4 4 4-4" />
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10" />
          <path d="m15 9-6 6" />
          <path d="m9 9 6 6" />
        </svg>
      </button>
    </div>
  </div>
</div>

#app {
  --tr: 0.3s ease-in-out;
  justify-self: center;
  display: grid;
  place-items: center;
  gap: 20px;
  max-width: 600px;
  width: 100%;
}
.app__title {
  font-size: 32px;
  font-weight: 500;
}
.app__item {
  overflow: hidden;
  position: relative;
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 30px;
  border: 1px solid #a6acaf;
  border-radius: 10px;
  transition: background-color var(--tr);
}
.app__item > svg {
  --w: 150px;
  position: absolute;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: var(--w);
  height: var(--w);
  stroke: hsl(195 53% 79% / 0.33);
}
.app__item.expanded {
  background-color: #f6f6f6;
}
.app__item-qa {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}
.app__item-q {
  color: #1b2631;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}
.app__item-a {
  padding-block-start: 20px;
}
.app__item-btns {
  position: relative;
  z-index: 1;
  min-width: 24px;
  height: 24px;
}
.app__item-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.app__item-btn span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: icomoon;
  font-size: 10px;
}
.app__item-btn svg {
  --w: 30px;
  width: var(--w);
  height: var(--w);
  stroke: #999;
}

const ITEMS = [{
    question: "Как бросить яйцо на бетонный пол, не разбив его?",
    answer: "Бросай. Яйцо треснет, а бетонный пол нет.",
    isExpanded: false,
  },
  {
    question: "Представь, что ты падаешь в яму полную ядовитых змей. Как выжить?",
    answer: "Перестать воображать.",
    isExpanded: false,
  },
  {
    question: "Что превращает девушку в женщину?",
    answer: "Возраст.",
    isExpanded: false,
  },
  {
    question: "До того, как была открыта гора Эверест, какая гора была самой высокой в мире?",
    answer: "Гора Эверест.",
    isExpanded: false,
  },
  {
    question: "Чего никогда нет в женской сумочке?",
    answer: "Порядка.",
    isExpanded: false,
  },
]
const {createApp, ref} = Vue
createApp({
  setup() {
    const items = ref(ITEMS)
    return {
      items
    }
  }
}).mount('#app')