Vue3 result won't output in the Safari browser but the Chrome

Question

I am using Laravel 9 for API and Vue3 for consuming it. I encountered a strange situation.

Issue:
The result is not displayed in the Safari browser but works well in Chrome.

I have a simple Resource collection as below.

Laravel API

Resource

class PostResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function toArray($request): array
    {
        return [
            'id'         => $this->id,
            'title'      => $this->title,
            'content'    => substr($this->content, 0, 50) . '...',
            'created_at' => $this->created_at->toDateString(),
        ];
    }
}

Controller

public function index()
{
    return PostResource::collection(Post::all());
}

Vue

Composable

import {ref} from "vue";

export default function usePosts() {
    const posts    = ref([])
    const getPosts = async () => {
        axios.get('/api/posts')
            .then(response => {
                posts.value = response.data.data
            })
    }
    return {posts, getPosts}
}

Template

<tr v-for="post in posts">
    <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">{{ post.id }}</td>
    <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">{{ post.title }}</td>
    <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">{{ post.content }}</td>
    <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">{{ post.created_at }}</td>
</tr>

Sfari Output

Chrome Output