VueJS component not rendering

Question

I have a very basic vueJS app which I'm following from the website.

Here's the code, why is the component not rendering?

HTML

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

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

<div>
<ol>
  <todo-item></todo-item>
</ol>
</div>

JS

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

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

Answer 1

• Use the component inside of the specified el mount element
• Define the component before initializing the Vue instance with new Vue

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

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

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

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
  <p>{{ message }}</p>
</div>

<div>

</div>