I'm trying to make this app work :

I want to make button with number change its number when + or - is clicked but I don't know how. Here is code (I'm new to this so I'm sorry if the code seems terrible to you):

Button's html :

<div class="btn-group" role="group" aria-label="Basic example" v-bind='food' style="float: right">
  <button type="button" class="btn btn-primary">{{food.number}}</button>
  <button type="button" class="btn btn-primary" v-on:click="increase(food.id)">+</button>
  <button type="button" class="btn btn-primary" v-on:click="decrease(food.id)">-</button>
</div>

app.js :

const App={
  methods:{
    async changeFavourites(id){
      await fetch(`/api/menu/${id}`,{method:'PATCH'})
    },
    async increase(id){
      await fetch(`/api/incr/${id}`,{method:'PATCH'})
    },
    async decrease(id){
      await fetch(`/api/decr/${id}`,{method:'PATCH'})
    }
  },
  data(){
    return{
      foods:[],
    }
  },
  async mounted(){
    const res = await fetch('/api/menu')
    this.foods = await res.json()
  }
}
Vue.createApp(App).mount('#app')