Чтобы пользовательский компонент поддерживал работу с директивой v-model необходимо выполнить два условия:

1. компонент должен принимать prop с именем value;
2. компонент должен порождать событие input с новым значением.

Таким образом,

<input v-model="something">

это всего лишь синтаксический сахар для:

<input
v-bind:value="something"
v-on:input="something = $event.target.value">

Пример:

======

Компонент реализует ввод имени и фамилии, а возвращает объект с этими данными.

<template>

<div class="form-group">

<label for="fullname">Full Name:</label>

<input

type="text"

name="firstname"

class="form-control"

placeholder="First Name"

v-model="value.firstname"

@change="dataChanged">

<input

type="text"

name="lastname"

class="form-control"

placeholder="Last Name"

v-model="value.lastname"

@change="dataChanged">

</div>

</template>

<script>

export default {

props: {

// 1) принимаем prop с именем value

value: {

type: Array,

required: true,

}

},

methods: {

dataChanged() {

// 2) порождаем событие input с новым значением

this.$emit('input', this.value)

}

}

}

</script>

<style>

</style>

Использование:

<app-full-name v-model="fullname"></app-full-name>