创建vue组件过程中，无错误提示却显示不出组件data中的数据-template

目前发现有两个原因

1. 实例对象声明要放在组件声明的后面！

<div id="firstVue">//vue对象
        <div>
            <mycom1></mycom1>//使用组件
        </div>
    </div>
   
    //组件模板
    <template id="tom">
            <div>
                <a>这是tom</a>
                <h1>tom的变量：{{msg}}</h1>
            </div>
        </template>
</body>
<script type="text/javascript">
    Vue.component('mycom1', {
        template: '#tom',
        data: function () {
            return {
                msg: '这是组件的中data定义的数据',
                msg1: '123456'
            }
        }
    })
    
    //myVue的声明要放在组件mycom1后
    var myVue = new Vue({
        el: '#firstVue',
        data: {
            inputData: "你好123",
            msg: 123456
        }
    })

若两处位置调换
组件不显示

2. 组件不在vue挂载的实例对象firstValue（el中绑定）里