Vue click prevent triggers - vue.js

Question

I'm making a menu, with some accordion links, that when clicked, will show more options. The problem now, is that when I click one, they all trigger.
I need to trigger only the element that has been clicked.
I've tried #click.prevent, stop, self etc and not working. Maybe I'm missing something??
<li :aria-expanded="foo">
<button id="foo-1" #click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>
<li :aria-expanded="foo">
<button id="foo-2" #click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>
I'm using foo as boolean type.
Any idea??
Thanks you!!

Answer 1

The problem is all the <li>s are bound to the same foo variable, so editing one reference affects all others.
The solution is to create separate variables for each <li>. For example, you could change foo to be an array, and bind each individually:
<template>
<li>
<button #click="foo[0] = !foo[0]">FOO</button>
</li>
<li>
<button #click="foo[1] = !foo[1]">FOO</button>
</li>
<template>
<script>
export default {
data() {
return {
foo: []
}
}
}
</script>