Vue.jsでv-forで回した個々のページにリンクをつけたいです

Vue-cliを使って簡単な投稿ブログ投稿アプリのようなものを作っています。

個別のページをルーティング/blogs/:idのような感じでルーティングすることまではできました。
しかし飛ばした先のviewで変数エラーになってしまいます。

エラー内容は以下のBlog.vueに置いてprops['blog']がうまく渡せていないというものです。
v-forで回した個別ページにそれぞれidつきのルーティングで個別ページに飛ばしたい場合はどうすれば良いでしょうか?????‍♂️
ご教授いただけると幸いです。

↓Blogs.vue

<template>
  <div>
    <ul>
      <li v-for="blog in blogs" :key="blog.id">
        <a :href="'/blogs/' + blog.id">
          <Blog :blog="blog" />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import Blog from './Blog'

export default {
  props: ['blogs'],
  components: {
    Blog
  }
}
</script>

↓Blog.vue

<template>
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2">{{blog.title}}</div>
      <p class="text-gray-700 text-base">
        {{blog.description}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['blog'],
  created() {
    console.log(this.blog)
  }
}
</script>