如何用嵌套的json对象填充vue条件库中的vue组件？

<template>
  <div>
    <p>{{ jsonData.title }}</p>
    <ul>
      <li v-for="item in jsonData.items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: {
        title: '示例标题',
        items: [
          { id: 1, name: '项目1' },
          { id: 2, name: '项目2' },
          { id: 3, name: '项目3' }
        ]
      }
    };
  }
};
</script>

<template>
  <div>
    <child-component :json-data="jsonData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      jsonData: {
        title: '示例标题',
        items: [
          { id: 1, name: '项目1' },
          { id: 2, name: '项目2' },
          { id: 3, name: '项目3' }
        ]
      }
    };
  }
};
</script>