fix: vue warn toRefs() when using useMeta

[vaiil]

🐛 The bug
When I use useMeta, I get the following warning in dev mode on server side:
toRefs() expects a reactive object but received a plain one.

🛠️ To reproduce
Steps to reproduce the behavior:

1. Write smth like that:

import { defineComponent, useMeta } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    useMeta({ title: '234' })
    return () => <div></div>
  },
  head: {}
})

2. exec npm run dev
3. see in console:

ERROR  [Vue warn]: toRefs() expects a reactive object but received a plain one.

🌈 Expected behaviour
No warnings

ℹ️ Additional context

Package versions:

"nuxt": "^2.14.5",
"vue": "^2.6.12",
"@nuxtjs/composition-api": "^0.12.5",

Nuxt mode is universal

[TheAlexLichter]

Can reproduce when solely using useMeta.

composition-api/src/meta.ts

Lines 110 to 114 in dc6f253

	const refs = toRefs(_head) as ToRefs<
	ReturnType<typeof createEmptyMeta> & {
	titleTemplate: ReactiveHead['titleTemplate']
	} & T
	>

@danielroe Would it makes sense to entirely skip the toRefs here or maybe checking via isReactive first?

[danielroe]

This is an upstream bug (reported).

[bissolli]

Guys, would this bug affect the metatags on SSR?

My metatags are generated dynamically based on the first segment of the URL, and I just did a refactoring where I switched my layout from Options API to Composition API and I started getting a very weird behavior.

Let's say, this first segment is a business that uses my platform and it's is used to compose the title page like below:

Access: /carrefour
Title should be: Order from Carrefour

Access: /mini-market
Title should be: Order from Mini Market

But weirdly, in the document sent by the SSR, it comes with the wrong business in the title and later on after client hydration it gets updated to the correct business - and because of that I definitely can't go live with the refactoring 😓

Would it be related? Any guesses if not?

As an example, all I do is that:

layouts/default.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

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

export default defineComponent({
  name: 'LayoutsDefault',
  head: {},
  setup(_, { root }) {
    const { store } = useContext()

    // the business is loaded in the nuxtServerInit based on the first URL segment and feed into the vuex store.
    const business = store.getters['business/getData']

    const nuxtI18nSeo = root.$nuxtI18nSeo()
    const title = `Order from ${business.name}`

    useMeta({
      title,
      htmlAttrs: {
        ...nuxtI18nSeo.htmlAttrs,
      },
      meta: [
        // ... my own metatags
        ...(nuxtI18nSeo.meta ?? []),
      ],
      link: [
        // ... my own links
        ...(nuxtI18nSeo.link ?? []),
      ],
    })

    return {}
  },
})
</script>

I also get this [Vue warn]: toRefs() expects a reactive object but received a plain one. during SSR.

[bissolli]

Guys I was able to reproduce the error above in development mode, and basically if I keep 2 browser tabs open one with /carrefour and another with /mini-market and start refreshing both at the same time - that is what happens in production due to the high movement in the app - somehow the data fetch from vuex gets mixed and the markup response from the document comes with wrong metatags.

If I just replace this

  setup(_, { root }) {
    const { store } = useContext()

    // the business is loaded in the nuxtServerInit based on the first URL segment and feed into the vuex store.
    const business = store.getters['business/getData'] 

for this

  setup(_, { root }) {
    // the business is loaded in the nuxtServerInit based on the first URL segment and feed into the vuex store.
    const business = root.$store.getters['business/getData'] 

The error will go away.

Not sure if it is really related to the fix #251.

[danielroe]

@bissolli The issue you describe sounds like the same issue as nuxt/nuxt#7696 with pending PR: nuxt/nuxt#8132

[bissolli]

@bissolli The issue you describe sounds like the same issue as nuxt/nuxt.js#7696 with pending PR: nuxt/nuxt.js#8132

That is exactly what I am facing! Thanks helping out =)
Until it's fixed I have to avoid using the context to generate my metas.