vuejs - nested component won't render

Question

I have a small problem. I have a modal with a component inside. I imported the component as usual.

but it doesn't render in the DOM it is displayed like this:

<postcomponent data-v-290e0142="" is-in-modal="true" post="[object Object]"></postcomponent>

With every other component it works, but I use this component also at many differnent locations.

Is this maybe a maximum nested component problem?

Modal:

  <Modal title="Post bestätigen" @close="close">
    <div>
      <PostComponent :show-analytics="false" :is-in-modal="true" :post="post" />
    </div>
    <div slot="footer-actions">
      <button
        class="bg-primary flex ml-3 rounded items-center p-2 rounded text-white"
        @click="onSubmit"
      >
        Verstanden<i class="ml-2 material-icons text-sm">done</i>
      </button>
    </div>
  </Modal>
</template>
<script>
import PostComponent from '@/components/organisms/post/PostComponent';
import Modal from '@/components/modals/Modal';
export default {
  name: 'PostComponentModal',
  components: { Modal, PostComponent },
  props: {
    post: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      activeConfirmation: false,
    };
  },
};
</script>

PostComponent:

<template>
  <div :id="`post-${post.id}`" class="flex flex-col text-grayDark">
    <PostHeader class="mb-2" :post="post" @editPost="editPost" @togglePinned="emitPin" />
    <PostContent
      :post="post"
      :comment-count="commentCount"
      :is-in-modal="isInModal"
      @clickImage="onClickImage"
      @click="$emit('click')"
    />
    <PostFooter
      class="mt-2"
      :post="post"
      :show-comments="showComments"
      :show-analytics="showAnalytics"
      :show-pinned="showPinned"
      @toggleLike="emitLike"
      @commentAdded="onCommentAdded"
      @clickComment="onClickComment"
      @likeComment="sendOpinionId"
    />
  </div>
</template>

<script>
import PostHeader from '@/components/organisms/post/components/PostHeader';
import PostFooter from '@/components/organisms/post/components/PostFooter';
import PostContent from '~/components/organisms/post/components/PostContent';
export default {
  name: 'PostComponent',
  components: { PostFooter, PostContent, PostHeader },
  props: {
    post: {
      type: Object,
      default: () => {},
    },
    showComments: {
      type: Boolean,
      default: false,
    },
    showAnalytics: {
      type: Boolean,
      default: true,
    },
    showPinned: {
      type: Boolean,
      default: true,
    },
    isInModal: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      commentCount: 0,
    };
  },
  computed: {},
  mounted() {
    this.commentCount = this.post.get('thread').get('commentCount');
    console.log(this.post);
  },
  destroyed() {},
  methods: {
    emitLike(payload) {
      this.$emit('toggleLike', payload);
    },
    emitPin(post) {
      this.$emit('togglePinned', post);
    },
    onCommentAdded() {
      this.commentCount++;
    },
    onClickComment(post) {
      this.$emit('clickComment', post);
    },
    sendOpinionId(obj) {
      this.$emit('likeComment', obj);
    },
    editPost(obj) {
      this.$emit('editPost', obj);
    },
    onClickImage(mediaObj) {
      this.$emit('clickImage', mediaObj);
    },
  },
};
</script>