Как передать даные из родительского компонента в дочерний (модальное окно с полями input)?? vue

///Родительский компонент
<template>
   <table class="table mt-5 app">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ClientId</th>
            <th scope="col">Name</th>
            <th scope="col">LastName</th>
            <th scope="col">MiddleName</th>
            <th scope="col">Address</th>
            <th scope="col">Passport</th>
            <th scope="col">Phone</th>
            <th scope="col">Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="client in clients" :key="client.clientId">
            <td>{{ client.clientId }}</td>
            <td>{{ client.name }}</td>
            <td>{{ client.lastName }}</td>
            <td>{{ client.middleName }}</td>
            <td>{{ client.address }}</td>
            <td>{{ client.passportNumber }}</td>
            <td>{{ client.phone }}</td>
            <td>
                <!-- <router-link to="/MyModal"> -->
                <button
                    @click="editNote(client)"
                    type="button"
                    class="btn me-3 btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#staticBackdrop"
                    id="testbtn"                    >
                    edit
                </button>
                <button
                    @click="this.visible = !this.visible"
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#staticBackdrop"
                >
                    delete
                </button>
                <MyModal
                    v-model:show="visible" 
                    :client="client"/>

                <!-- </router-link> -->
            </td>
        </tr>
    </tbody>
    </table>
</template>

<script>
import MyModal from "./MyModal.vue";

import axios from "axios";
import "bootstrap";

export default {

name: "Clients",

components: {
    MyModal,
},
data() {
    return {
        visible: false,
        client: {
            id: 0,
            name: "",
            lastName: "",
            middleName: "",
            address: "",
            passportNumber: 0,
            phone: "",
        },
        clients: [
            {
                clientId: 1,
                name: "Насим",
                lastName: "Хуршедович",
                middleName: "Улугов",
                address: "г.Душанбе",
                passportNumber: 31231233,
                phone: "+992931299714",
            },
            {
                clientId: 2,
                name: "Шахром",
                lastName: "Миралиевич",
                middleName: "Ахмедов",
                address: "г.Душанбе",
                passportNumber: 37543233,
                phone: "+99291583750",
            },
                {
                clientId: 3,
                name: "Чамолиддин",
                lastName: "Бурхониддинович",
                middleName: "Шарипов",
                address: "г.Гисар",
                passportNumber: 3978653,
                phone: "+9929312344",
            },
        ],
    };
},
methods: {
    editNote(client) {

        this.visible = !this.visible;
        this.client.id = this.clients.id,
        this.client.name = this.clients.name,
        this.client.lastName = this.clients.lastName,
        this.client.middleName = this.clients.middleName,
        this.client.address = this.clients.address,
        this.client.passportNumber = this.clients.passportNumber,
        this.client.phone = this.clients.phone
        console.log(client);
        console.log(this.clients);
    }
},


///дочерний компонент
<template>
<div class="win" v-if="show">
    <div class="win-content container p-3">
        <div class="mb-3 row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input v-model="client.name" type="text" class="form-control" id="staticEmail" 
/>
            </div>
        </div>

        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label"
                >LastName</label
            >
            <div class="col-sm-10">
                <input v-model="client.lastName" type="text" class="form-control" 
id="inputPassword" />
            </div>
        </div>

        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label"
                >MiddleName</label
            >
            <div class="col-sm-10">
                <input v-model="client.middleName" type="text" class="form-control" 
 id="inputPassword" />
            </div>
        </div>

        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label"
                >Address</label
            >
            <div class="col-sm-10">
  <input v-model="client.address" type="text" class="form-control" id="inputPassword" />
            </div>
        </div>

        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label"
                >Passport</label
            >
            <div class="col-sm-10">
                <input v-model="client.passportNumber" type="text" class="form-control" 
 id="inputPassword" />
            </div>
        </div>

        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Phone</label>
            <div class="col-sm-10">
                <input v-model="client.phone" type="text" class="form-control" 
 id="inputPassword" />
            </div>
        </div>

        <button class="btn btn-secondary" @click="show = !show">закрыть</button>

    </div>
 </div>
 </template>

 <script>
 import "bootstrap/dist/css/bootstrap.css";

 export default {
 name: "MyModal",
 props: {
    client: {
        type: Object,
        id: Number, 
        name: String,
        lastName: String,
        middleName: String,
        address: String,
        passportNumber: String,
        phone: String,
    },
    show: {
        type: Boolean,
        default: false,
    },
  },
 };
 </script>