how to stop the count from going negative when the value is zero?

I’m trying to create an add to card button but I’m stuck on the count going negative,basically when we click on remove item at value zero its goes negative(-1) since I have just started learning vuejs and this is totally new to me so any help would be apreciated!

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement(){
      this.count--
    }
  },
  mounted() {
    this.increment()
    // this. decrement()
  }
}
</script>

<template>
  <div class="btn-container">
    <!-- <button class="button"> count  is : {{ count }}</button><br> -->
    <button class="button"  @click="increment">add to cart</button>
    <button class="button"  @click="decrement">remove item</button>
  </div>
  <h1 v-if= count> item added {{count}} </h1>
    <h1 v-else-if = count> please add item </h1>
  <h1 v-else> no item 😢</h1>
</template>

<style>
  .btn-container{
    align-items:"center";
    justify-content:"center";
    display: flex;
    padding:5px;
    margin:5px;
    background-color: red;
  }
  .button{
    padding : 1vw;
    margin: 1vw;
    background-color: aquamarine;
    border-radius: solid 1px;
  }
</style>

>Solution :

Just check if count is greater of 0 before substract:
(as commented if you want to disable(or maybe hide) decrement button when count is 0, you can bind disabled or use v-show)

const { reactive, onMounted } = Vue
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement(){
      this.count > 0 && this.count--
    }
  },
  mounted() {
    this.increment()
    // this. decrement()
  }
})
app.mount('#demo')

.btn-container{
    align-items:"center";
    justify-content:"center";
    display: flex;
    padding:5px;
    margin:5px;
    background-color: red;
  }
  .button{
    padding : 1vw;
    margin: 1vw;
    background-color: aquamarine;
    border-radius: solid 1px;
  }

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="btn-container">
    <!-- <button class="button"> count  is : {{ count }}</button><br> -->
    <button class="button"  @click="increment">add to cart</button>
    <button class="button" :disabled="!count"  @click="decrement">remove item</button>
  </div>
  <h1 v-if= count> item added {{count}} </h1>
    <h1 v-else-if = count> please add item </h1>
  <h1 v-else> no item 😢</h1>
</div>