关于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 说，响应数据会显示在页面上

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