`Cannot stringify arbitrary non-POJOs` and `Invalid prop: type check failed for prop` warnings

Question

In my project, I'm loading some product categories from Prismic to display in a sidebar. This was working absolutely fine until earlier today, however I'm now receiving the following warnings:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarItem> at components/SidebarItem.vue
       <Sidebar> at components/Sidebar.vue
         <App> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

[Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarSection> at components/SidebarSection.vue
       <Sidebar> at components/Sidebar.vue
         <App> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

[Vue warn]: Invalid prop: type check failed for prop "category". Expected Category, got Object 

found in

---> <SidebarItem> at components/CategoryHeader.vue
       <App> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

This is despite the fact that the sidebar categories are showing up as expected. At first, I couldn't understand how this could be the case. However, I also noticed that I'm seeing this warning:

WARN Cannot stringify arbitrary non-POJOs Navigation

Based on this discussion, it seems like the devalue lib is failing in the current version of Vuex which is causing these warnings incorrectly. Am I correct in this conclusion and is there any way I can easily resolve these warnings? This post mentions creating a plugin to modify the model, however I'm not sure where to insert this (very new to Nuxt/Vue etc.).

If there isn't a way to resolve these warnings, is my only other option to stop using a custom type in my Vuex state, and use regular objects instead?

For some context here's what my Vue files look like. I believe they are all valid.

index.vue:

<template>
  <div>
    <NavBar />
    <!-- <Header /> -->
    <main>
      <div v-if="!$fetchState.pending" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex-1 min-w-0 bg-white xl:flex">
          <Sidebar :navigation="navigation" />

          <div class="bg-white lg:min-w-0 lg:flex-1"> <!-- <Parent container /> -->
            <CategoryHeader :category="navigation.categories[0]"/>

            <div class="sm:p-6">
              <ProductGrid />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">

...

export default {
  name: 'App',
  components: {
    Sidebar,
    NavBar,
    Header,
    CategoryHeader
  },
  data() {
    return {
      navigation: Navigation
    }
  },
  async fetch() {
      await this.fetchCategories()
      this.navigation = this.$store.getters.navigation
  },
  fetchOnServer: true,
  methods: {
      ...mapActions({ fetchCategories: 'fetchCategories'})
  }
}

Sidebar.vue:

<template>
    <!-- This example requires Tailwind CSS v2.0+ -->
    <div class="xl:flex-shrink-0 xl:w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto ">
        <h3 class="text-xl font-bold text-gray-800">{{ navigation.heading }}</h3>
        <div class="mt-5 flex-grow flex flex-col">
            <nav class="flex-1 px-2 space-y-1 bg-white" aria-label="Sidebar">
                <div v-for="(category, index) in navigation.categories" :key="index">
                    <SidebarItem v-if="!category.subcategories.length" :category="category"/>

                    <SidebarSection v-else-if="category.subcategories.length" @click="toggleExpansion(index)" :category="category"/>
                </div>
            </nav>
        </div>
    </div>
</template>

<script lang="ts">

...

export default {
    name: 'Sidebar',
    props: {
        navigation: {
            type: Navigation,
            required: true
        }
    }
}
</script>

SidebarItem.vue:

<template>
    <div>
        <!-- Current: "bg-gray-100 text-gray-900", Default: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900" -->
        <a href="#" class="bg-gray-100 text-gray-900 group w-full flex items-center pl-2 pr-2 py-2 text-sm font-medium rounded-md">
        {{ category.name }}
        </a>
    </div>
</template>

<script lang="ts">
import Category from '@/types/category'

export default {
    name: 'SidebarItem',
    props: {
        category: {
            type: Category,
            required: true
        }
    }
}
</script>

SidebarSection.vue and CategoryHeader.vue are almost identical in terms of props etc.

Answer 1

About the non POJO's warning:

I solved the problem converting the class object to a POJO's at toJSON() function (which is the function devalue library calls). So an example would be:

class User {
  toJSON () {
    return { ...this } // here I make a POJO's copy of the class instance
  }
}

It's a clear solution which also makes sense to solve the warning.

About problems with object types: you get Object from Vuex store navigation getter, so at this point (getter) you can manage to force navigation.categories to return Category[]