Same vue code from html not working in blade file

below is the code from html:

<div id="app">
    <select @change="onSelectUserType()" v-model="type">
        <option value="">Who are you?</option>
        <option value="tailor">Tailor</option>
        <option value="store">Store</option>
        <option value="customer">Customer</option>
    </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            type: ''
        },
        methods: {
            onSelectUserType: function () {
                console.log(this.type)
                alert(this.type)
            }
        },
        mounted() {
            console.log('mounted');
        }
    });
</script>

this is code from html that is working, when i apply it inside blade it is not working! it should show alert and console on changing the options, but nothing is visible, also no error is detected what is the issue?