Vue Ya

Problema:

Plantear una componente llamada 'selector-numerico' con tres propiedades 'valor','minimo' y 'maximo'. En su interior definir dos botones que permitan incrementar o decrementar en uno el valor seleccionado actualmente.

pagina.html
funciones.js
estilos.css
Ejecución de la página

<!doctype html>
<html>
<head>
  <title>Prueba Vue</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id="aplicacion">
    <selector-numerico v-bind:valor="1" v-bind:minimo="0" v-bind:maximo="20"></selector-numerico>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

Vue.component('selector-numerico', {
    props:['valor', 'minimo', 'maximo'],
    template: `<div><span style="width:1rem;display:inline-block;background:#ff0">{{cant}}</span>
                 <button v-on:click="incrementar()">+</button>
                 <button v-on:click="decrementar()">-</button>
               </div>`,
    data: function() {
      return {
        cant: this.valor
      }
    },
    methods: {
      incrementar: function() {
        if (this.cant<this.maximo)
          this.cant++;
      },
      decrementar: function() {
        if (this.cant>this.minimo)
          this.cant--;
      }      
    }
  })

new Vue({
    el:'#aplicacion'
  })

</script>
</body>
</html>

Componentes: definición de métodos y modelo de datos