Bsinput.vue

<template>
    <div v-bind:class="'form-group control-group ' + wrapperClass">
        <span class="required-lbl pull-left" v-if="required">* </span>
        <label class="control-label">{{ label }}</label>
        <div class="controls">
        <div v-bind:class="rightAddon || leftAddon?'input-group':''">
            <span v-if="rightAddon" class="input-group-addon">{{rightAddon}}</span>
            <input v-bind:type="type" @input="updateInput($event.target.value)" class="form-control"
                   v-bind:required="required" :value="value" v-bind:placeholder="placeholder">

            <span v-if="leftAddon" class="input-group-addon">{{leftAddon}}</span>
        </div>
        <p class="help-block"><a v-if="helphref" v-bind:href="helphref" target="_blank"> {{help}}</a> <span
                v-if="!helphref">{{help}}</span></p>
        </div>
    </div>
</template>
<script>
    export default {
        props:
            {
                label: String,
                placeholder: String,
                type: {
                type: String,
                value: String,
                default: 'text'
                },
                required: String,
                help: String,
                helphref: String,
                value: null,
                leftAddon: String,
                rightAddon: String,
                wrapperClass:
                    {
                        type: String,
                        default: 'col-md-12'
                    }
            },
        methods:
            {
                updateInput(val) {
                    this.$emit('input', val)
                }
            }
    }
</script>