vueでのinputボックスクリアボタンの表示と非表示

methods: {
        clear1(){
            if(this.name){
                this.name = '';
            }
        }
    }

.clear { 
                    display: none; 
                    position: absolute; 
                    width: 30px; 
                    height: 30px;
                    right: 2%;
                    top: 50%;
                    transform: translate(-2%,-50%);
                    background: url('../../assets/images/clear.png');
                    background-size:100% 100%;
                }
                .input::-ms-clear { display: none; }
                .input:valid + .clear { display: inline; }