Recursion when pushing to Component Page Vue

Question

I'm experiencing an error "InternalError: too much recursion" when trying to push from my Layout to a Post site.

Code of Layout.vue:

watch(searchText, (newValue, oldValue) => {
  log('Current State of SearchText', newValue);
  if (newValue !== null) {
    if (newValue.value !== undefined) {
      let id = newValue.value;
      // push to post with id
      router.push(`/post/${id}`);
    } else {
      // todo: start search
    }
  }
});

I'm using the watch to react when my QSelect model value is changing.

My route:

{ path: '/post/:id', component: () => import('pages/Post.vue'),

My Post-page:

<template>
  <q-page class=""> 
    <Post // I'm getting no error when deleting this Component
      :description="post.description"
      :title="post.title"
      :author="post.user"
      :date="post.date"
      :tags="post.tags"
      :commentArray="post.comments"
    /> 
    <h1>
      Test
    </h1>
  </q-page>
</template>

<script>
import Post from 'src/components/PostComp.vue';
import { useRouter, useGetters, useActions } from '@u3u/vue-hooks';
import { ref } from '@vue/composition-api';
import moment from 'moment';

const debug = require('debug');

const log = debug('app:PostPage');

export default {
  name: 'Post',
  components: {
    Post,
  },
  setup() {
    const { route } = useRouter();
    const post = ref({});

    const getters = {
      ...useGetters('post', ['post']),
    };
    const actions = {
      ...useActions('post', ['findAll']),
    };

      log('params:', route.value.params);

     const p1 = getters.post.value(route.value.params.id);

      post.value = {
        title: p1[0].title,
        user: 'Mary Sullyman',
        description: p1[0].description,
        tags: p1[0].postTags,
        comments: p1[0].commentDTOList,
        date: moment(p1[0].createdDate).format('DD.MM.YYYY HH:mm') + ' Uhr',
      }; 

      log(post);

What I'm trying to do: I have a QSelect in my Toolbar to search for posts which works just fine. Now I'm trying to push to a dynamically generated site for the post clicked.

Answer 1

What if you remove name: 'Post' (from export default)? The name you set matches the component tag name, so it falls into an infinite render loop.

See Recursive Components (still applies to Vue 3 even though it's from Vue 2 docs)