How to hide and show another dropdown based on previous selection vue

Hello all, I have a blade view that I wish to use vue js in. This view consists of two dropdowns where the state of the second is dependent on the first.

here is my code sample

    <script src="https://vuejs.org/js/vue.js"></script>

    <div class='form-group'>
        <label for="user_type" class="col-sm-2 control-label">
            User Type <span class="text-red">*</span>
        </label>
        <div class="col-sm-6" id='user_type'>
            <select name="user_type" class='form-control' v-model="selected">
                <option value="" selected>Select User Type</option>
                <option value="1">Student</option>
                <option value="2">Staff</option>
            </select>
            <span class="col-sm-4 control-label"></span>
        </div>
    </div>

    <div class='form-group'>
        <label for="role_type" class="col-sm-2 control-label">
            Role <span class="text-red">*</span>
        </label>
        <div class="col-sm-6">
            <select name="role_type" id='role_type' class='form-control '>
                <option value="">Select Role Type</option>
                <option value="1">Admin</option>
                <option value="2">HOD</option>
                <option value="3">Teaching Staff</option>
                <option value="4">Non Teaching Staff</option>
                <option value="5">Accountant</option>
            </select>
            <span class="col-sm-4 control-label"></span>
        </div>
    </div>



<script>
new Vue({
    el: '#user_type',
    data: {
        selected: ''
    }
});
</script>

I want the role_type dropdown to be hidden if the user_type id selected is Student and enabled if the user_type id selected is Staff. am a newbie in vue js so please bear with me. Thanks.