[FEAT] Fix vue warn

src/views/BlogDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue';
+  import { ref, onMounted, watch, computed } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useBlog, type BlogPost } from '../composables/useBlog';
   import { useSEO } from '../composables/useSEO';
@@ -13,43 +13,61 @@
   const post = ref<BlogPost | undefined>(undefined);
   const renderedContent = ref('');
 
+  const slug = computed(() => route.params.slug as string);
+
+  // Initialize with default SEO (will be updated when post loads)
+  useSEO({
+    title: 'Blog Post',
+    description: 'Read our latest article about spritesheet generation and game development.',
+    url: `/blog/${slug.value}`,
+    type: 'article',
+    keywords: 'sprite sheet, game development, blog'
+  });
+
+  addBreadcrumbSchema([
+    { name: 'Home', url: '/' },
+    { name: 'Blog', url: '/blog' },
+    { name: 'Article', url: `/blog/${slug.value}` }
+  ]);
+
   onMounted(async () => {
-    const slug = route.params.slug as string;
-    post.value = await getPost(slug);
+    post.value = await getPost(slug.value);
 
     if (post.value) {
       renderedContent.value = await marked(post.value.content);
+    } else {
+      router.push({ name: 'blog-overview' });
+    }
+  });
 
-      // Set SEO meta tags
+  // Update SEO and structured data when post loads
+  watch(post, (newPost) => {
+    if (newPost) {
       useSEO({
-        title: post.value.title,
-        description: post.value.description,
-        image: post.value.image,
-        url: `/blog/${slug}`,
+        title: newPost.title,
+        description: newPost.description,
+        image: newPost.image,
+        url: `/blog/${slug.value}`,
         type: 'article',
-        author: post.value.author || 'nu11ed',
-        publishedTime: post.value.date,
-        keywords: post.value.keywords || 'sprite sheet, game development, blog'
+        author: newPost.author || 'nu11ed',
+        publishedTime: newPost.date,
+        keywords: newPost.keywords || 'sprite sheet, game development, blog'
       });
 
-      // Add structured data
       addBlogPostSchema({
-        title: post.value.title,
-        description: post.value.description,
-        author: post.value.author || 'nu11ed',
-        datePublished: post.value.date,
-        image: post.value.image,
-        url: `/blog/${slug}`
+        title: newPost.title,
+        description: newPost.description,
+        author: newPost.author || 'nu11ed',
+        datePublished: newPost.date,
+        image: newPost.image,
+        url: `/blog/${slug.value}`
       });
 
-      // Add breadcrumb
       addBreadcrumbSchema([
         { name: 'Home', url: '/' },
         { name: 'Blog', url: '/blog' },
-        { name: post.value.title, url: `/blog/${slug}` }
+        { name: newPost.title, url: `/blog/${slug.value}` }
       ]);
-    } else {
-      router.push({ name: 'blog-overview' });
     }
   });
 </script>