Estoy tratando de hacer que esta aplicación funcione :

Quiero hacer que el botón con número cambie su número cuando se hace clic en + o - , pero no sé cómo. Aquí está el código (soy nuevo en esto, así que lo siento si el código te parece terrible):

HTML del botón :

 <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>

aplicación.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')