fix: useMeta with useFetch inside setup()

[Skippidar]

🐛 The bug
When using useMeta with useFetch inside setup() function title rolls back (to values from nuxt.config.js) wit ssr enabled after page was loaded

🛠️ Environment
CodeSandbox Example
Fresh NuxtJS install with composition-api

package.json:

{
  "name": "Test",
  "version": "1.0.0",
  "description": "Test",
  "author": "Test",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "prod": "yarn build && yarn start",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "post-update": "yarn upgrade --latest"
  },
  "dependencies": {
    "@nuxtjs/composition-api": "0.23.4",
    "nuxt": "^2.15.0"
  }
}

nuxt.config.js

export default {
  ssr: true,
  head: {
    title: "config_title",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: "title_check"
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
  },
  modules: [],
  css: [],
  buildModules: ["@nuxtjs/composition-api/module"],
  plugins: []
};

pages/index.vue

<template>
  <div>Some text here</div>
</template>

<script>
import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api";

export default defineComponent({
  setup() {
    const { title, meta } = useMeta();
    useFetch(async () => {
      title.value = "Title here";
      meta.value.push({
        hid: "description",
        name: "description",
        content: "DESCRIPTION HERE",
      });
    });
  },
  head: {},
});
</script>

🧩 Case

1. Run yarn dev
2. Open http://localhost:3000/

With ssr: true in config - after opening page browser tab's title becomes config_title in 1-2 seconds. If i change title in index.vue - page hot reloads and everything is ok
With ssr: false browser tab's title is "Title here" as expected

If i move useMeta inside useFetch function then everything is ok, but after hot reload i have errors in console (so i think it's not ok to do this) and title becomes "config_title"

[wobsoriano]

Having the same issue when a page is refreshed.

https://github.com/wobsoriano/hackernews-composition-api

Demo: https://hn-composition.vercel.app/news

Go to user page or comments page then refresh

[danielroe]

The issue is the same as #383 - basically setting metadata within useFetch won't work because that function won't be called. Instead, you can locate a source of truth outside it, as in the examples in the issue above.