Vue.js component transparent wrapper https://youtu.be/7YZ5DwlLSt8?t=1304

BaseInput.vue

<template>
    <label>
        {{ label }}
        <input
            v-bind="$attrs"
            :value="value"
            v-on="listeners"
        >
    </label>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: '',
        },
    },

    data() {
        return {
            value: '',
        };
    },

    computed: {
        listeners() {
            return {
                ...this.$listeners,
                input: event => this.$emit('input', event.target.value),
            };
        },
    },
}
</script>

whatever.vue

<template>
    <div>
        <!-- 
            Note how we can use attributes such as placeholder or events such 
            as @focus despite the fact that we didn't explicitly declared them 
            in BaseInput.vue
        -->
        <base-input
            label="Search for a game"
            placeholder="Type something..."
            @focus="onFocus"
            @input="onInput"
        >
        </base-input>
    </div>
</template>

<script>
import BaseInput from '../components/BaseInput.vue';

export default {
    components: { BaseInput },

    methods: {
        onFocus() {
            alert('Focus');
        },
        onInput(content) {
            console.log(content)
        },
    },
};
</script>