Vue 3 TypeScript import class property undefined

Question

I am trying to use a class cast in TypeScript which makes a fetch() call to an api, within the console it is evident that if the information returns, but at the time of representing it in the vue3 template with Composition Api, it is not rendered, and with vue tools it is evident that the variable posts within the Coments.vue template appears undefined, I'm using vue 3, Vite.

I add details of the code I'm using.

Iservices.ts

interface Iservices {
    postId?: number;
    id?: number;
    name?: string;
    email?: string;
    body?: string;
}

export default Iservices

Services.ts

import { Ref, ref } from 'vue'
import Iservices from '../interfaces/Iservices'

class Services {
  private post: Ref<Iservices>
  private posts: Ref<Array<Iservices>>

  constructor () {
    this.post= ref<Iservices>({})
    this.posts= ref<Array<Iservices>>([])
  }

  getPost(): Ref<Iservices> {
    return this.post
  }

  getPosts (): Ref<Array<Iservices>> {
    return this.posts
  }

  async fetchAllPosts (): Promise<void> {
    try {
      const url = 'https://jsonplaceholder.typicode.com/comments/'
      const response = await fetch(url)
      const json = await response.json()
      this.posts.value = await json.results 
    } catch (error) {
      console.log(error)
    }
  }

  async fetchById (id: any): Promise<void> {
    try {
      const url = `https://jsonplaceholder.typicode.com/comments/${id}`
      const response = await fetch(url)
      const json = await response.json()

      this.post.value = await json
    } catch (error) {
      console.log(error)
    }
  }
}

export default Services

Plantilla vue

Coments.vue

<script lang="ts">

    import { defineComponent, onMounted, ref } from 'vue';
    import Services from '../services/Services'

    export default defineComponent({
        name: 'Coments',
        setup () {
            const service = new Services()
            const posts= service.getPost()
                
                
            onMounted(async () => {
                await service.fetchAllPosts() 
            }) 
            return {
                posts,
            }
        }
    })

    

</script>
<template>
    <h1>Comentarios recientes</h1>
    <br>
    <span v-for="item in posts" :key="item.id">
            {{ item.email }} <br>
    </span>
</template>

Error posts | undefined Ref

screenshot of the error

I appreciate any help, to understand what happens......