Why passing data through Vue-router returning "[object Object]"?

Question

What I'm trying to do is to pass some data from one component to another via router (I'm using Vue-Router-4 with Vue 3.0). But the data that I'm getting back is just "[object Object]" instead of the actual value. Here is what I did. Inside the component that sends the data I have this function

goToQuestions() {
  this.$router.push({
    name: "QuestionsPage",
    params: {
      data: this.questions
    },
  });
},

inside my index.js I have this

{
  path: "/questions-page",
  name: "QuestionsPage",
  props: true,
  component: () =>
    import ('@/views/QuestionsPage.vue')
},

And then inside the receiver component I have this snippet

props: ["data"],
  mounted() {
    console.log("data coming from the router", this.data);
  },

Answer 1

I am assuming you this.questions is either array or object.

with router it is advised not to send objects and arrays. Instead send an id . And on the receiver page use that id to fetch the data.

Even if you want to pass object you can try this:

when adding routes, use props's Function mode so that it has a default property user and it will add route.params as props.

{
    path: '/questions',
    name: 'questions',
    component: QuestionsComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

use this to push into your route

self.$router.push({
    name: 'questions',
    params: {
        data: this.questions
    }
})