How to check different id (ref) for using one method in Vue JS - vue.js

Question

I am new in Vue. In my code I gonna use a lot of same looking container and all of them should have slider page. For now when I clicking on top of container all slider-pages is coming out. I am understand,I should add id(ref) to each container. But I still cant get how to use it. Huge Thanks for any help or advice.
<template>
<div #click="shotList" ref="123">
<span>
<div
class="d-flex flex-row top-row justify-content-center mt-5"
style="z-index: 111 !important"
>
<div class="flex-row d-flex top-size">
<span class="col text-left" style="margin-top: -2px"
>21:40-23:00</span
>
<span class="col-9 text-right" style="margin-top: -2px"
>UFC 256 MMA</span
>
</div>
</div>
<div
class="d-flex flex-row justify-content-center"
style="z-index: 111 !important"
>
<div class="flex-row d-flex bottom-size">
<span class="col-5 bottom-size-white">Habib</span>
<span class="col-2 bottom-size-green"
>5%
<p class="bottom-p">Volatility</p>
</span>
<span class="col-5 bottom-size-black">Connor</span>
</div>
</div>
</span>
<ListBase :title="[{ text: `3`, value: `2` }]" />
</div>
<div #click="shotList" ref="125">
<span>
<div
class="d-flex flex-row top-row justify-content-center mt-5"
style="z-index: 111 !important"
>
<div class="flex-row d-flex top-size">
<span class="col text-left" style="margin-top: -2px"
>21:40-23:00</span
>
<span class="col-9 text-right" style="margin-top: -2px"
>UFC 256 MMA</span
>
</div>
</div>
<div
class="d-flex flex-row justify-content-center"
style="z-index: 111 !important"
>
<div class="flex-row d-flex bottom-size">
<span class="col-5 bottom-size-white">Habib</span>
<span class="col-2 bottom-size-green"
>5%
<p class="bottom-p">Volatility</p>
</span>
<span class="col-5 bottom-size-black">Connor</span>
</div>
</div>
</span>
<ListBase :title="[{ text: `3`, value: `2` }]" />
</div>
</template>
<script>
export default {
name: "take",
data() {
return {
show: false,
};
},
methods: {
shotList() {
this.show = !this.show;
if (this.show) {
this.$emit("openList");
} else {
this.$emit("closeList");
}
},
spaceCheck(event) {
let x = event.pageX;
let y = event.pageY;
console.log(x, y);
},
},
};
</script>