posts.vue

<template>
  <h1>Vue 3 and Fetch Example</h1>

  <ul v-if="!loading && posts && posts.length">
      <li>foooo</li>
    <li v-for="post of posts"  v-bind:key="post.id">
      <p><strong>{{ post.title }}</strong></p>
      <p>{{ post.body }}</p>
    </li>
  </ul>

  <p v-if="loading">Still loading..</p>
  <p v-if="error">This is error</p>
</template>



<script lang="ts">
import { defineComponent } from 'vue';
//import { onMounted, onUpdated, onUnmounted } from 'vue'

export default defineComponent({
  name: 'Posts',
  methods: {
    fetchData() {

       fetch('http://jsonplaceholder.typicode.com/posts'
       , {
        method: "get",
        headers: {
          "content-type": "application/json",
        }}

       ).then(response => response.json())
            .then((data) => this.$data.posts = data);

  },
  },
  data() {
    return {
      posts: [],
      loading: false,
      error: null,
    };
  },

  mounted() {
      this.fetchData();
    },

});
</script>