Cannot Access Props from Computed Properties Vue3

I want to use the substring method on a prop via a computed property and I'm running into a couple of errors

1. The Substring method is not recognized / applicable
2. The prop can be accessed by the computed property and returned, but no operation can be done on it

I'm using the <script setup> format

when using the <script> format, it works just fine

ParentView.vue

<template>
    <div class="post-list">
        <CardList :cardList="cardData" />
    </div>
</template>

<script setup>
import { ref } from "vue";
import CardList from "../components/CardList.vue";
const cardData = ref([
    {
        title: "ONE",
        body: " BODY FOR ONE Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus corporis cum
        id: 1,
    },
    {
        title: "TEN",
        body: " BODY FOR TEN Lorem ipsum dolor sit, amet consectetur adipisicing elit. At, culpa dignissimos quia
        id: 2,
    },
]);
</script>

CardList.vue

<template>
    <div class="post-list">
        <div v-for="card in cardList" :key="card.id">
            <h3>{{ card.title }}</h3>
        </div>
    </div>
    <div class="cardsingle">
        <h1>Single Card Data</h1>
        <div class="si">
            <SingleCard :postSingle="cardList" />
        </div>
    </div>
</template>

<script setup>
import SingleCard from "./SingleCard.vue";
const props = defineProps({
    cardList: {
        type: Array,
        required: true,
    },
});
</script>

singleCard.vue

<template>
    <div class="card">
        <div v-for="post in postSingle" :key="postSingle.id">
            <h3>{{ post.body }} for {{ post.id }}</h3>
            <h3>Snippet for {{ post.id }}</h3>
            <h2>here {{ snippet }}</h2>
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
    postSingle: {
        type: Array,
        required: true,
    },
});

const snippet = computed(() => {
 1-->   return props.postSingle; //will return all the array items
 2-->  return props.postSingle.body.substring(0, 100) + "...";  //throws up the error
});
</script>

The Error is

SingleCard.vue:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'substring')

From my deduction, using Vuejs3 & the <script setup> format I don't yet know how to

1. Access Props using Computed Properties and run operations on them

I have tried looking up resources on how to do that but to no avail

In addition to solving this error, I will really appreciate any docs or videos where I can read up on

Thank you

Edit::