useHead does not working with vue router

[mv-debug]

Hi,

I try to set my head of a website with multiple pages.

On the root it works like a charm. But if I visit subsites the head section will be untouched.

These are my dependencies:

"dependencies": {
    "@unhead/addons": "^1.0.20",
    "@unhead/vue": "^1.0.18",
    "@vueuse/head": "^1.0.23",
    "unhead": "^1.0.18",
    "vue": "^3.2.31",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.9",
    "@vitejs/plugin-vue": "^2.2.4",
    "@vue/compiler-sfc": "^3.2.31",
    "autoprefixer": "^10.4.2",
    "daisyui": "^2.6.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23",
    "vite": "^2.8.6"
  }
}

I use this lib like this in every view:

<script>
.....
import { useHead } from "@vueuse/head";

export default {
  components: {
    ....
  },
  setup() {
    useHead({
      title: "....",
      htmlAttrs: {
        lang: "de",
      },
      meta: [
        {
          name: "description",
          content:
"...."        },
      ],
      link: [
        { rel: "canonical", href: "h...." },
        {
          rel: "alternate",
          hreflang: "x-default",
          href: "....",
        },
        {
          rel: "alternate",
          hreflang: "de",
          href: "....",
        },
      ],
    });
  },
};
</script>

Any ideas?

Thank you in advance.

Best

Michael

[mv-debug]

It seems that it was a caching problem. Sorry for this issue.

[mv-debug]

Closed, from my point of view.

[harlan-zw]

No problem, glad you could sort it :)