Custom Input Component: CustomInput.vue using @input
<template> <div> <input :value="value" @input="$emit('input', $event.target.value)" /> <div>Local Value: {{ value }}</div> </div></template><script>export default { props: ['value'], methods: { updateValue(value) { this.$emit('input', value) } }} </script>or using v-model
<template> <div> <b-form-input v-model="localValue"></b-form-input> <div>Local Value: {{ value }} / {{ localValue }}</div> </div></template><script>export default { props: ['value'], computed: { localValue: { get() { return this.value }, set(value) { this.$emit('input', value) } } }} </script>Usage
<template> <custom-input v-model="value"></custom-input></template><script>export default { data() { return { value: 'test' } }}</script>