<template>
  <div>
    <p>External counter:</p>
    <div class="row">
      <button @click="$emit('input', value - 1)">-</button>
      {{ value }}
      <button @click="$emit('input', value + 1)">+</button>
    </div>

    <p>Internal counter:</p>
    <div class="row">
      <button @click="count--">-</button>
      {{ count }}
      <button @click="count++">+</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "NumberCounter",
  props: {
    value: Number,
  },
  emits: ["input"],
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style scoped>
div {
  background: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  gap: 3px;
}
div.row {
  flex-direction: row;
  gap: 1em;
}
</style>