组件计算属性数据渲染不到页面中


```javascript

import '../dist/apply.js'
import Vue from'../vue.js'



let app = new Vue({
    el: "#app",
    data: {
        msg:"",
        email:['163','188','1578','qq','xinjiang','croce', 'weigh','Adonai','drawee','bybbybyby'],
        isShow:""
    },
    computed:{
        dealMsg(){
            let index = this.msg.indexOf("@");
            if(index >=0){
                return this.msg.slice(0, index)
            }
            return this.msg;
        },
    },
    watch:{
        msg(value){
            this.msg = value;
        }
    },
    methods:{
        
    },
})


```html

<div id="app">
        <div class="content">
            <label for="username">账户名</label>
            <input type="text" id="username"  v-model="msg"  autocomplete="off">
            <ul>
                <li v-for="(item,index) in email" :key="index" >{{dealMsg}} @ {{item}}
                <template v-if="item == '1578'" >.cn</template><template v-else>.com</template></li>
            </ul>
        </div>
    </div>

你用到了 watch和 计算属性 冲突了吧 。注释掉watch看看

img

这部操作是错误写法,你完全不需要这个侦听器

你这个watch没有死循环吗?

我打印了一下,vue中的数据改变了,但是渲染不到页面中