<template>
  <h1>{{ msg }}</h1>
  <button
    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
    @click="count++"
  >
    inc product {{ count }}
  </button>
  <button
    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white 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 }
  },
  setup() {
    return {
      count: ref(0)
    }
  },
  methods: {
    inc() {
      // console.log('log count')
      console.warn('warn count')
      console.error('err count')
      this.count++
    }
  }
})
</script>
