Mismatching childNodes vs. VNodes

Hi Rupert,

This is probably a dumb question... sorry! I’ve been really wanting to use this for a while but on a couple of projects now I just get stumped at the classic mismatching nodes warning...

Mismatching childNodes vs. VNodes:  NodeList(11) [comment, text, div.header, text, blockcontent, text, div.section-images.margin-bottom-double.clickable, text, div.section-text, text, comment] (11) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode]

vue.common.dev.js?4650:630 [Vue warn]: 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.

I’m sure I must be, but don’t think I’m doing anything untoward – just a standard async fetch where I check if my Vuex store is already populated, and if not, dispatch an API call from an action in the store.

  async fetch ({ store, params }) {
    if (store.state.homepage === '') {
      await store.dispatch('HOMEPAGE_CALL');
    }
  },

In my pages I am just doing the following:

<div 
    v-if="homepage" 
    v-for="(section, index) in homepage.sections" 
    :key="section._id" 
    :id="makeId(section.title)" 
    class="section">
[...]
    <BlockContent 
        v-if="section.text" 
        :blocks="section.text" 
        className="section-text" 
        :renderContainerOnSingleChild="true" />
[...]
</div>

Sections is simply returned as a computed property:

homepage() {
    return this.$store.state.homepage
}

The issue stops if I comment out the BlockContent component, so I really don’t think I’m doing anything strange here – but would hugely appreciate any thoughts!

rdunk / sanity-blocks-vue-component

Mismatching childNodes vs. VNodes #9