javascript - 親から渡された prop オブジェクトでデータ属性オブジェクトを初期化する

Question

親コンポーネントからオブジェクトを小道具として渡し、その値で子を初期化しようとしています。

これの目的は、いくつかのページを持つフォームである子コンポーネントを含むダイアログを開くことです。ページの 1 つが入力されると、変更が親に送信され、ダイアログの次のページが表示されます。ユーザーが前のダイアログ画面に移動したい場合は、更新された親からの値で初期化する必要があります。

  /* PARENT */
  <template>
    <CompanyInfo :editedClient="editedClient" />
  </template>
  <script>
    import CompanyInfo from './CompanyInfo.vue'
    export default {
      name: 'Client',
      components: {
        'CompanyInfo': CompanyInfo
      },
      data: () => ({
        editedClient: {
          name: 'aaaa',
          website: '',
          locations: [],
          contacts: [
              {
                  firstName: '',
                  lastName: '',
                  emails: [{ email: '' }],
                  phoneNumbers: [{ phoneNumber: ''}],
                  notes: []
              }
          ]
        },
      })
    }
  </script>


 /* CHILD */
 <template></template>
 <script>
   export default {
     name: 'CompanyInfo',
     data: () => {
       props: [ 'editedClient' ],
       companyInfo: {
         name: this.editedClient.name, //this throws an error when directly initialized like this
         website: this.editedClient.email, //the error says that 'this' is undefined
         locations: this.editedClient.locations //tried initializing this with mounted() hook
       }
     },
     beforeCreate() {
       console.log(this.editedClient.name) // this prints undefined to the console
     }
   }
 </script>