Vue.js - Props with String Templates

01-app.js

Vue.component('List', {
  template: `
  <div class="list">
    <item v-for="name in names" v-bind:name="name" />
  </div>
  `,
  data: () => ({
    names: [
      'Ryan',
      'Alexa',
      'Jimmy'
    ]
  })
})

Vue.component('Item', {
  template: `
  <li class="item">{{ name }}</li>
  `,
  props: [ 'name' ]
})

new Vue({ el: '#app' })

02-view.html

<div id="app">
  <list />
</div>

03-result.html

<!-- Final Result -->
<div id="app">
  <ul class="list">
    <li class="item">Ryan</li>
    <li class="item">Alexa</li>
    <li class="item">Jimmy</li
  </ul>
</div>