VueJS: Почему дочерний компонент не визуализируется, когда родительский шаблон не в x-шаблоне?

Question

В следующем коде, когда родительским шаблоном является text/x-template, как показано ниже, дочерний компонент (внутри родителя) будет обработан :

<script type="text/x-template id="#list">
  <div class="wrapper">
    <p>{{firstName}} - 
      <button @click="changeFirstName">Change</button>
    </p>
    <LastNameCmp></LastNameCmp>    
  </div>
</script>

однако, как показано ниже, если шаблон родителя получен из html, дочерние компоненты не отображаются. Почему это происходит?

шаблон

<div id="app">
  <div class="wrapper">
    <p>{{firstName}} - 
      <button @click="changeFirstName">Change</button>
    </p>
    <LastNameCmp></LastNameCmp>    
  </div>
</div>


<script type="text/x-template" id="item">
  <div><p>{{lastName}} - <button @click="changeLastName">Change</button></p></div>
</script>

VueJS

var LastNameCmp = {
  template: '#item',
  data() {
    return {
      lastName: 'Sharma'
    }
  },
  methods: {
    changeLastName: function() {
      this.lastName = 'Abrahim'
    }
  }
}

new Vue({
  el: '#app',
  components: {
    LastNameCmp
  },
  data: {
        firstName: 'Rajat'
  },
  methods: {
    changeFirstName: function() {
      this.firstName = 'John'
    }
  }
})

Спасибо.

Answer 1

Попробуйте изменить LastNameCmp на last-name-cmp или lastnamecmp в вашем шаблоне вроде

<lastnamecmp></lastnamecmp>

+ в случае Vue

components: {
   'lastnamecmp': LastNameCmp
}

Пожалуйста, смотрите https://vuejs.org/v2/guide/components-props.html