Why does clicking an accordion item open all items? - vue.js

Question

I tried to implement the below into my project. I double-checked and I cannot see any flaw in my implementation. Yet in my case, a click on one item opens all items of the accordion. Why?
Below is my code.
Markup:
<div
v-for="item in faqItems"
:key="item.id"
class="faq-item"
#click="toggle"
>
<transition
name="accordion"
#before-enter="beforeEnter"
#enter="enter"
#before-leave="beforeLeave"
#leave="leave"
>
<div v-show="show" class="faq-item-details">
<div class="faq-item-details-inner" v-html="item.text">
</div>
</div>
</transition>
</div>
JS:
methods: {
toggle () {
this.show = !this.show
},
beforeEnter (el) {
el.style.height = '0'
},
enter (el) {
el.style.height = el.scrollHeight + 'px'
},
beforeLeave (el) {
el.style.height = el.scrollHeight + 'px'
},
leave (el) {
el.style.height = '0'
}
}

Answer 1

You have the same show for all accordions.
You can use separate components (see answer from #Moisés Hiraldo) or use the following logic:
HTML
<div
v-for="item in faqItems"
:key="item.id"
class="faq-item"
#click="toggle(item.id)"
>
...
<div v-show="showItems[item.id]" class="faq-item-details">
JS
data() {
return {
showItems: {}
}
},
methods: {
toggle (id) {
const newVal = !this.showItems[id]
this.$set(this.showItems, id, newVal)
}
}
If you need only one opened item
HTML
<div
v-for="item in faqItems"
:key="item.id"
class="faq-item"
#click="select(item.id)"
>
...
<div v-show="item.id === selectedItemId" class="faq-item-details">
JS
data() {
return {
selectedItemId: null
}
},
methods: {
select(id) {
this.selectedItemId = this.selectedItemId !== id ? id : null
},
},

Answer 2

I would expect that code to open all items when you click one. The reason is they're all inside the same component, so they all access the same this.show variable.
You could have your main component as an accordion container than renders each element as a separate component, each one with its own this.show variable:
<accordion-item
v-for="item in faqItems"
:key="item.id"
:item="item"
>