문자열 리터럴로 템플릿을 등록하는 방식에 대한 의문점

안녕하세요, 강의 듣는 중 질문이 있어 글 남깁니다.

실습때 본 아래 코드처럼, component 의 template 를 등록하는데에 있어서 문자열 리터럴을 사용하는 듯 합니다. 

제 생각엔, html 엘리먼트를 문자열 리터럴로 등록하게 되면 (태그 속성등도 마찬가지로) 디버깅이나 유지 보수 측면에서 불리하지 않을까 생각이 듭니다.

다른 방법이 있는건가요? 아니면 뷰를 사용하면 이 방식으로 항상 템플릿을 등록해야 하나요?

감사합니다

var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
            }
        })