v-modelを使わずに子コンポーネントへinputのvalueを渡す方法

基本的なv-model

  <input v-model="message">
  <div>{{`message is ${message}`}}</div>

v-modelを使わずに入力された値を子コンポーネントに渡したい

input タグの入力値を data() に書き、子コンポーネントにバインドさせます。

ParentComponents.vue

<template>
  <input @input="message = $event.target.value">
  <ChildComponents :message="message"/>
</template>

<script>
import ChildComponents from "~/components/ChildComponents";

export default {
  components: { ChildComponents },
  data() {
    return { message: "" };
  }
}
</script>

子コンポーネントでは親から受け取ったmessageをpropsに書きます。

ChildComponents.vue

<template>
  <div>{{ `message is ${ message }` }}</div>
</template>

<script>
export default {
  props: { message: String }
};
</script>

これで message is [入力された値]が表示されます。
フォームのバリデーションとかで使いそう。

つまり

<input v-model="message">

これと下記は同じでした。

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

参考：コンポーネントで v-model を使う

【補足】
今回の場合のv-bind:valueとv-on:inputは、v-modelの syntax sugar / 糖衣構文 といいます。
教えてくれた @konojunya さんありがとうございます^^