<template>
  <button class="mpc-button" @click="increment">
    {{ text }}
  </button>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    times() {
      return this.count > 1 ? 'times' : 'time';
    },
    text() {
      return `I have been clicked ${this.count} ${this.times}`;
    },
  },
  methods: {
    increment() {
      this.count += 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.mpc-button {
  color: red;
}
</style>
