javascript - 親の v-model をテンプレートに渡す方法

Question

検索ページの UI を作成しようとしていますが、コンポーネントを使用してコードを再利用したいと考えています。ただし、ページのモデルを検索コンポーネントに渡す方法が必要ですが、方法がわかりません。

index.html で:

<template id="search">
  <q-search inverted placeholder="Look" float-label="Search" v-model="search" /> <-- BIND HERE
</template>

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <search v-model="search"></search> <-- HOW PASS INTO THIS
  </q-layout-header>
</q-layout>
</template>

そしてコード：

const search = {
  template: '#search',
  props: ['search']
};

const ListCustomersPage = {
  key: 'ListCustomersPage',
  template: '#ListCustomersPage',
  components: { search },
  data() {
    return {
      title: 'Select Customer',
      search:''  <-- FROM THIS TO 'BIND HERE'
    }
  }
};