fix: useFetch and useMeta together not working

[Mensix]

🐛 The bug
When using useMeta hook inside the useFetch, the title value should get updated - which happens just for some miliseconds, then it's reset to the default state.

🛠️ To reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/Mensix/ssr-test and clone the repository
2. Run npm run dev
3. Go to http://localhost:3000/1
4. Notice the bug

🌈 Expected behaviour
Title value should be set to as provided in the useFetch hook. Note, that this behaviour worked in some previous versions as expected.

[danielroe]

This is the same issue as #383. The workaround there may be helpful.

[Mensix]

Wop, sorry didn't notice that :) Nevertheless (as mentioned in another similar issue), could it be implemented somewhen? Maybe not even in this package, but in Nuxt 3. My use case is dynamically generated OpenGraph meta tags, and I'm looking forward to have a way for it (I'm currently struggling with undefineds using computed useMeta).

Fixed! I had to use computed useMeta variant and drop v-if that prevents desired value from displaying from server-side.

<template>
  <h1>{{ todo.title }}</h1>
</template>

<script>
import {
  defineComponent,
  useFetch,
  useRoute,
  ref,
  useMeta,
} from '@nuxtjs/composition-api'
export default defineComponent({
  setup() {
    const route = useRoute()
    const { id } = route.value.params
    const todo = ref({})

    useFetch(() =>
      fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
        .then((response) => response.json())
        .then((output) => (todo.value = output))
    )

    useMeta(() => ({
      title: todo.value.title,
    }))

    return {
      todo,
    }
  },
  head: {},
})
</script>