<template>

<div v-for="counter in listOfCounters" :key="counter.id">
  <button @click="counter.decrement()">-</button>
  {{ counter.count }}
  <button @click="counter.increment()">+</button>
</div>

</template>


<script setup>
import { ref, reactive } from 'vue'


const listOfCounters = [];

for (let i = 0; i < 10; i++) {
  const counter = reactive({
    id: i,
    count: 0,
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
  })
  
  listOfCounters.push(counter);
}
</script>