[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]"

Question

"cardData" sees but does not understand what elements the array consists of.

Everything works in vue-router v3.x.

My error:

[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]". 
      at <ProductCart key=undefined productCartData="[object Object]" > 
      at <Cart cartData= ["[object Object]"]0: "[object Object]"length: 1__proto__: Array(0) onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
      at <RouterView> 
  at <App>


<router-link class="nav-link" :to="{ name: 'cart', params: { cartData: cart } }">

Cart.vue

<ProductCart
  v-for="product in cartData"
  :key="product.id"
  :productCartData="product"
/>

props: {
    cartData: {
      type: Array,
      default() {
        return [];
      },
    },
  },

ProductCard.vue

props: {
    productCartData: {
      type: Object,
      default() {
        return {};
      },
    },
  },

Getter

 cart(state) {
            return state.cart;
          },

store.js

const store = createStore({
      state: {
        products: [],
        cart: [],
      },
    },

Answer 1

You cant pass getter cart of array as params in router link. if you want access getter of cart into your component just access it directly in that component.

or you don't event need getter. just create a computed property in your component.

params can only be string or number and they need to be declared in router

read for params. https://next.router.vuejs.org/guide/essentials/dynamic-matching.html

to access objects arrays from store or data of components just use computed property.