这个为什么显示不出来？

<div id="app">
  <post-list />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp('PostList', {
  data() {
    return {
      title: 'Java无难事'
    }
  },
  components: {
    PostItem
  },
  template: `<div><PostItem postTitle="title"></PostItem></div>`
});
app.mount('#app');
</script>

换了一个，还是

<div id="app">
  <post-item></post-item>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp('PostList', {
  data() {
    return {
      title: 'Java无难事'
    }
  },
  components: {
    PostItem
  },
  template: `<div><PostItem postTitle="title"></PostItem></div>`
});
app.mount('#app');
</script>

还是

<div id="app">
  <post-list></post-list>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({})
  app.component('PostList', {
  data() {
    return {
      title: 'Java无难事'
    }
  },
  components: {
    postItem: {
    props: ['postTitle'],
    template: `<h3>{{ postTitle }}</h3>`
  }
  },
  template: `<div><PostItem postTitle="title" /></div>`
  
})
app.mount('#app');
</script>

这样也不对，到底是怎样才对

<div id="app">
  <post-list></post-list>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({})
  app.component('PostList', {
  data() {
    return {
      title: 'Java无难事'
    }
  },
  components: {
    postItem: {
    props: ['postTitle'],
    template: '<h3>{{ postTitle }}</h3>'
  }
  },
  template: '<div><PostItem postTitle="title" /></div>' 
  
})
app.mount('#app');
</script>

再写一遍，也不对啊

<div id="app">
  <post-list></post-list>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  /* const app = Vue.createApp({});*/
  Vue.component('PostList', {
     data() {
       return {
         title: 'Java 无难事'
    }
     },
  
  components: {
      PostItem
    },
    template: `<div><PostItem postTitle="title"></PostItem></div>`
  });
  mount('#app')
</script>