Meta Tags do not display properly in Page Source for Nuxt.js app – SEO

I am trying to understand why the correct title and meta tags do not display when I click “View Page Source”. What does display are the meta tag information from my nuxt.config.js file.

How do I get the meta data from my specific page to display in the page source? I need this for SEO purposes.

Here is my pages/index.vue file

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

<script>
export default {
  head () {
    return {
      title: "this is the page specific title",
      meta: [
        { hid: 'description', name: 'description', content: 'Page 1 description' }
      ]
    }
  }
}
</script>

Here is my nuxt.config.js file (I’m just posting the part where I have default title and meta tags:

module.exports = {
  mode: "universal",
  head: {
    title: "this is the nuxt.config title",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2' },
      { hid: 'description', name: 'description', content: 'This is the generic description.' }
    ],
  },

This is the page source title and meta tags. As you can see, it is pulling from nuxt.config.js file instead of the index.vue file.

However, when I inspect element, I get the correct meta tag in the head section.

Can anyone explain what I am doing wrong?
I need the page specific title and page specific meta tags to appear in the page source for SEO purposes.