[Vuejs]-Inheriting child components from vue.js json parent component

Vue.component('Child', {
  props: ['parentData'],
  template: `<div>
  <h2>Child</h2>
  <pre>parentData = {{ parentData }}</pre>
  </div>`
})

new Vue({
  el: '#app',
  data: () => ({ msg: {} }),
  methods: {
    response (file, response) {
      this.msg = response
      // console.log(response)
    }
  },
  mounted () {
    // simulate loading data
    setTimeout(() => this.response(null, {
      file_name: 'result.jpg',
      font_color: 'red',
      info_text: 'Clean'
    }), 2000)
  }
})

h1, h2 { margin: 0 }
div {
  padding: 1em;
  border: 1px solid #666;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <h1>Parent</h1>
  <pre>msg = {{ msg }}</pre>
  <!-- pass msg to child via the parent-data prop -->
  <child :parent-data="msg"/>
</div>