<template>
  <h1>{{ msg }}</h1>
  <button
    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
    @click="count++"
  >
    inc product {{ count }}
  </button>
  <button
    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
    @click="inc"
  >
    inc
  </button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  props: {
    msg: { type: String, required: true },
    n: { type: Number, required: true }
  },
  setup() {
    return {
      count: ref(0)
    }
  },
  methods: {
    inc() {
      console.log('increment count')
      this.count++
    }
  }
})
</script>
