Alternate page with proper canonical tag and duplicate URL part errors in Google search console report - vue.js

Question

I have a static blog site created with Nuxt and hosted on Netlify. For content, I am using markdown files and the new Content module in Nuxt. I used Nuxt and static content, along with vue-meta for SEO purposes, but after a couple months, my coverage report shows multiple errors, and I can't get any pages returned in Google, even when searching on the site name or a specific string of text used on the site.
Here's my setup:
My markdown content is stored in /content/posts
In my blog/index.vue file, this is what I have for my meta tags and data fetching:
<script>
export default {
name: 'Posts',
head() {
return {
title: 'Blog Posts',
meta: [
{
hid: 'description',
name: 'description',
content: 'Example Site blog index'
},
{
hid: 'link',
name: 'link',
content: 'https://example.com/blog'
}
]
}
},
async asyncData({ $content, params }) {
const posts = await $content('posts', params.slug)
.only(['title', 'description', 'publishDate', 'slug'])
.sortBy('publishDate', 'desc')
.fetch()
return {
posts
}
},
};
</script>
In my /blog/_slug/index.vue page, I'm doing almost the same thing.
export default {
name: 'Post',
computed: {
pageConfig() {
return {
identifier: this.post.slug
}
}
},
head() {
return {
title: this.post.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.post.description
},
{
property: "og:site_name",
hid: "og:site_name",
vmid: "og:site_name",
content: "My Site Name"
},
{
property: "og:title",
hid: "og-title",
vmid: "og-title",
content: this.post.title
},
{
property: "og:description",
hid: "og-description",
vmid: "og-description",
content: this.post.description
},
{
property: "og:type",
hid: "og-type",
vmid: "og-type",
content: "article"
},
{
property: "og:url",
hid: "og-url",
vmid: "og-url",
content: 'https://example.com/blog/' + this.post.slug
},
{
hid: "link",
name: "link",
content: 'https://example.com/blog/' + this.post.slug
},
],
link: [
{
rel: 'canonical',
href: 'https://example.com/blog/' + this.post.slug
}
]
}
},
async asyncData({ $content, params }) {
const post = await $content('posts', params.slug).fetch()
return {
post
}
},
}
I'm using this to generate my sitemap in nuxt.config.js
sitemap: {
path: '/sitemap.xml',
hostname: process.env.BASE_URL,
gzip: true,
routes: async () => {
let routes = []
const { $content } = require('#nuxt/content')
let posts = await $content('posts').fetch()
for (const post of posts) {
routes.push(`blog/${post.slug}`)
}
return routes
},
}
and this generates a sitemap at /sitemap.xml with the following structure
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/blog/blog-post-1</loc>
</url>
<url>
<loc>https://example.com/blog/blog-post-2</loc>
</url>
<url>
<loc>https://example.com/blog/blog-post-3</loc>
</url>
</urlset>
I submitted my sitemap to Google.
When I look at my Coverage report in Google Search Console, I have two main problems:
A large number of posts listed under Not Found (404) with a URL of https://example.com/blog/blog/my-blog-post (two /blogs in the URL). I've noticed this happens sometimes when I click on a post right after deploying to Netlify. I've looked around the code, and I can't find where I might be adding an extra /blog in the URL.
An equally large number under Alternate page with proper canonical tag. Before I put the canonical tag in my /_slug/index/vue header, I got errors about missing a canonical tag, and now that I put that in, I get this error instead.
What do I need to do to fix these errors and get my content correctly indexed?