Vuejs : Vue.component Not Seems To Work

I am unsure am I doing something wrong but the vuejs component I declared is not working.

    <script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

</div>

  <ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

JavaScript:

var a = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', 
{
  template: '<li>This is a todo</li>'
})

I am using the JsFiddle, message part does display the data but the todo-item didn't show anything.

Your component needs to inside your "#app" div.

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p>{{ message }}</p>
    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item></todo-item>
    </ol>
</div>

Here is a working fiddle.