为什么vue组件里无法绑定数据，也不能使用watch方法？

vue初尝试，想写一个普通的手机验证码登录页面，在App.vue中使用Login组件，在Login.vue中使用tel组件，问题出在tel.vue；一个普普通通的{{msg}}居然不起作用，想用watch监听输入框的变化也不成功，（同样的代码换到App.vue中可以成功）不知道为啥。

tel.vue代码如下：

<template>
    <div className="firststep">
        <input v-model="number" className="input" placeholder="请输入电话号码"  @keydown="change">
    </div>
    <div className="erro">{{msg}}</div>
    
</template>
<style>
.firststep{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    height: 25px;
}
.input{
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: rgb(119, 119, 119);
    border-width: 1px;
    width: 100%;
}
.erro{
    display: relative;
    height: 100px;
    font-size: 10px;
}

</style>
<script>

export default {
    name:'tel',
    date(){
        return{
            msg:"nihaoya",
            number:'',
            error:true,
            errorinf:"请输入正确的手机号"
        }
    },
    methods:{
        change: function(){
            console.log(this.number)
            
        }
    },
    watch:{
      'number':{
              handler(newName){
                 console.log(newName);
              }
            },
          immediate:true
    }
}
</script>

渲染到页面上后，<div className="erro">{{msg}}</div>这一句渲染失败，显示如下

请问有朋友知道这是怎么回事吗？

将template里的代码，放到一个div标签里面，另外在script里面date应该写成data

你应该没有将tel.vue这个组件注册到index.js里面吧？

vue文件都要在index.js里面进行注册

template模板内只能有一个父标签

date--->data

谢谢各位，已经解决了！

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632