<div id="app" class="counters">
  <div class="counter"
       v-for="counter in counters">
    <h1>{{ counter.count }}</h1>
    <h2>{{ counter.title }}</h2>
    <button @click="counter.count++">+</button>
    <button @click="counter.count = 0">&times;</button>
  </div>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
  
  font-family: sans-serif;
  font-size: 1rem;
}

.counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  justify-items: center;
}

.counter {
  text-align: center;
}

const counters = [
  { 
    title: 'Strikes',
    count: 0
  },
  {
    title: 'Balls',
    count: 0
  },
  {
    title: 'Outs',
    count: 0
  }
]

const app = Vue.createApp({
  data: function () {
    return {
      counters: counters
    }
  },
  created: function () {
    const counters = localStorage.getItem('counters')
    
    if (counters) {
      this.counters = JSON.parse(counters)
    }
  },
  watch: {
    counters: {
      deep: true,
      handler: function (counters) {
        localStorage.setItem('counters', JSON.stringify(counters))
      }
    }
  }
})

const vm = app.mount('#app')