How do I bind events to multiple v-show on a vue page?

need to verify:
1, mobile number non-empty verification prompt "mobile number is empty", click "send verification code" trigger
2, mobile number format verification prompt "mobile number format error", click "send verification code" trigger
3, graphics verification code prompt "graphic verification code is incorrect", lose focus trigger
4, SMS check according to login

the main question is: how to control the concealment and display of prompts through v-show instructions? I hope you seniors will give us your comments. Thank you very much for your comments.

        <ul class="form_ul">
            <li>
                <p class="p_phone">
                    <label class="lable_phone" for="input_phone"></label><input id="input_phone" type="number" placeholder="" maxlength="11" v-model="phone">
                    <input type="button"  class="btn_send_yzm" id="send_yzm" value="" @click="sendCode" />
                
                <p class="form_tips" >/      
            </li>
            <li>
                <p class="p_yzm">
                    <label class="lable_yzm" for="input_yzm"></label><input id="input_yzm" type="text" placeholder="" maxlength="4"><a href="-sharp"><img class="img_yzm" src="" alt="loading"></a>
                   
                <p class="form_tips">    
            </li>
            <li class="p_ryzm_li">
                <p class="p_ryzm">
                    <label class="lable_ryzm" for="input_ryzm"></label><input id="input_ryzm" type="text" placeholder="" maxlength="6">   
                 
                <p class="form_tips">     
            </li>
        </ul>

<template> <ul class="form_ul"> <li> <p class="p_phone"> <label class="lable_phone" for="input_phone"></label><input id="input_phone" type="number" placeholder="" maxlength="11" v-model="phone"> <input type="button" class="btn_send_yzm" id="send_yzm" value="" @click="sendCode" /> <p class="form_tips" v-show='error.type=="phoneNum"'>{{error.msg}} </li> <li> <p class="p_yzm"> <label class="lable_yzm" for="input_yzm"></label><input id="input_yzm" type="text" placeholder="" maxlength="4"><a href="-sharp"><img class="img_yzm" src="" alt="loading"></a> <p class="form_tips" v-show='error.type=="code"'> </li> <li class="p_ryzm_li"> <p class="p_ryzm"> <label class="lable_ryzm" for="input_ryzm"></label><input id="input_ryzm" type="text" placeholder="" maxlength="6"> <p class="form_tips" v-show='error.type=="message"'> </li> </ul> </template> <script> export default{ data(){ return { error:{ type:'',// msg:'' // } }, methods:{ validateForm(){ ....// this.error.type='phoneNum'; this.error.msg=''; } } } </script>