VUE onChange function not working

How can i display my data once i select anything from the mod_accs_Role_ID? example i selected 1 in mod_accs_Role_ID then the role_Name would be display 'Hello' which all the data already stored in database

<div class="col-sm-6 form-group">
                            <label for="mod_accs_Role_ID" class="col-form-label">Role<span class="text-danger">*</span></label>
                            <select class="form-control" name="mod_accs_Role_ID" v-model="selected" v-on:change="onChange">
                                <option value="">Select Role</option>
                                <option v-for="item in sel_role" :value="item.role_id">{{item.role_Display}}</option>
                            </select>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="role_Name" class="col-form-label">Role Action<span class="text-danger">*</span></label>
                            <select class="form-control not-editable" name="role_Name" disabled>{{selected}}</select>
                        </div>

JS

  var vm = new Vue({

            el: '#maint_module_ctrl',
            data: {
  
                sel_role: [],
                selected:""
            },

           
            methods: {

                onChange: function () {
                    var self = this
                    ajaxJsonProcess("get", apiPath + "/param/role-dropdown", "", function (inDat) {
                        self.sel_role = inDat;
                    }, dftError);
                },