点击事件功能不适用于Vue组件

我是Vue框架的新手,当我尝试实现onclick事件处理程序函数时,它似乎不起作用。

下面是代码:

模板:

<template>
            </div>
            <div class = "btn-field">
                <button type ="button" id="signup">Sign up</button>
                <button type ="button" id="signin" class= "disable">Sign in</button>
                </div>

</template>

样式:

<style>

.btn-field button{ 
    color: #3c00a0;
    transition: background 1s;
}



.btn-field button.disable{
    background: #eaeaea;
    color: rgb(85, 85, 85);
}



</style>

脚本:

<script>

let signup = document.getElementById("signup");

let signin = document.getElementById("signin");

let name = document.getElementById("name");

let title = document.getElementById("title");

signin.onclick = function(){

nameField.style.maxHeight = "0";

title.innerHTML = "Sign In";

signup.classList.add("disable");

signin.classList.remove("disable");

}

</script>