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

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