Custom Components - Nuxt - Mismatching vNodes

Hi!

I'll start by saying thank you for this great project!

I have one issue tho, when using the rich text renderer with custom components. It is running on a Nuxt-project (static mode).

When adding a custom component to a rich text field, everything looks OK but the console is throwing: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Example below: rich-text-renderer.js

// ...
import Bar from '~/components/foo/bar.vue';

// ...

Vue.use(VueRichTextRenderer, {
  // ...
  resolvers: {
    components: {
      Bar,
    },
  },
});

bar.vue

<template>
  <p>BAR</p>
</template>

<script lang="ts">
import { defineComponent, PropType } from '@nuxtjs/composition-api';

export default defineComponent({ name: 'Bar' });
</script>

Any ideas what could be wrong?

m4rvr / storyblok-rich-text-renderer

Custom Components - Nuxt - Mismatching vNodes #12