How to fix mismatching childNodes with Vuetify select value saved in Nuxt store?

I'm saving Vuetify v-select value to Nuxt store. It works but I'm getting a mismatching childNodes error in the console each time I refresh my page.

A way to fix it to set test to any value of the select, but I need it to be equal to null at first use.

How should I fix it?

components/Test.vue

<template>
  <div>
    value: {{ $store.state.test }}
    <v-select
      label="Test"
      :value="$store.state.test"
      :items="testItems"
      @change="updateTest($event)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      testItems: [
        { text: 'Foo', value: 'F' },
        { text: 'Bar', value: 'B' },
      ],
    }
  },
  methods: {
    async updateTest(e) {
      await this.$store.dispatch('commitTest', e)
    },
  },
}
</script>

store/index.js

export const state = () => ({
  test: null,
})

export const mutations = {
  TEST_UPDATE(state, payload) {
    state.test = payload
  },
}

export const actions = {
  async commitTest({ commit }, payload) {
    commit('TEST_UPDATE', payload)
  },
}

This happens because the SSR content is not equal to the one after hydration. You could click on the error to see where this is coming from but it's probably because of the value of $store.state.test.

You could either set those in a created hook rather than directly or you could wrap your content coming from Vuex into a <client-only>...</client-only> tag. That way, it will not be generated on the server but only during client side rendering.

More info on this awesome article: https://blog.lichter.io/posts/vue-hydration-error/