关于vue3:vue3-如何让-axios-请求的数据显示在页面上

我让 chatgpt 给了我一段 『vue3 axios demo代码』

<template>
  <div>
    <h1>Vue3 Axios Demo</h1>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      data: [],
    });

    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      state.data = response.data;
    };

    return {
      fetchData,
      data: state.data,
    };
  },
};
</script>

而且 chatgpt 说，响应数据会显示在页面上

然而这个响应的数据，不会显示在页面上，须要做什么批改？