asd.vue

<template>
    <span class="input-quantidade-wrapper">
        <button class="btn btn-sm btn-default" @click="remove">
            <i class="fa fa-minus"></i>
        </button>

        <input type="number" class="form-control input-sm" @input="inputedValue" :value="value" />

        <button class="btn btn-sm btn-default" @click="add">
            <i class="fa fa-plus"></i>
        </button>
    </span>
</template>

<script>

    export default {

        props: {
            value: {
                type: Number,
                required: true
            },

            min: {
                type: Number,
                default: 0
            },

            max: {
                type: Number,
                default: 100
            }
        },

        methods: {

            inputedValue(event) {
                const val = Number(event.target.value);

                if (isNaN(val) || val < this.min || val > this.max) {
                    event.target.value = this.value;
                    return;
                }

                if (val === 0) event.target.value = 0;

                this.$emit('input', val);
            },

            remove() {
                if (this.value === this.min) return;

                this.$emit('input', --this.value);
            },

            add() {
                if (this.value === this.max) return;

                this.$emit('input', ++this.value);
            }
        }
    }
</script>

<style scoped>
    .input-quantidade-wrapper {
        display: flex;
        align-items: center;
        max-width: 150px;
        margin: auto;
    }

    .input-quantidade-wrapper input {
        font-size: 13px;
        text-align: center;
        margin: 0 8px;
    }
</style>