Vue3:显示嵌套的JSON对象数据不起作用

<template>
  <div>
    <h1>{{ nestedData.name }}</h1>
    <p>{{ nestedData.age }}</p>
    <ul>
      <li v-for="item in nestedData.items" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      nestedData: reactive({
        name: 'John Doe',
        age: 25,
        items: [
          { id: 1, name: 'Item 1', price: 10 },
          { id: 2, name: 'Item 2', price: 20 },
          { id: 3, name: 'Item 3', price: 30 },
        ],
      }),
    };
  },
};
</script>