v-for для массива, переданного как props, выдает ошибку

Я передаю массив объектов от родителя к ребенку и перебираю его с помощью v-for. Он бросает "TypeError: не удается прочитать свойство "title" неопределенного"

У меня есть postsList как родитель и Post как ребенок.

Ссылка для codesandbox: https://codesandbox.io/s/vue-template-hh0hi

Как заставить это работать?

// Parent 
<template>
  <div class="hello">
    <Post :posts="posts"/>
  </div>
</template>

<script>
import Post from './Post'

export default {
  name: "PostsList",
  data: () => {
    return {
      posts: [
        { title: 'one', description: 'desc one'},
        { title: 'two', description: 'desc two'}
      ]
    }
  },
  components: {
    Post
  },
  props: {
    msg: String
  }
};
</script>


Child

<template>
  <div :v-for="post in posts" class="hello">
    {{post.title}}
  </div>
</template>

<script>
export default {
  name: "Post",
 props: {
    title: { type: String, default: 'asdff' },
    posts: {
      type: Array,
      default: () => []
    }
  }
};
</script>