onchange of option got this error in vue js - vuejs2

Question

when i select option from dropdown it will show me this error
" Error in beforeDestroy hook: "TypeError: function () {
src_instanceMap.delete(instance.__VUE_DEVTOOLS_UID__)
} is not a function" "
code
<span v-else>
<select v-model="grade" #change="onChange" class="field" style="width:40%">
<option v-for="(item, key) in grades.data" :value="item.id"> {{item.name}}
</option>
</select><br><br><br>
</span>
onChange(event) {
this.$inertia.get('training?gradeId='+this.grade)
},
<template>
<app-layout>
<div class="container">
<div class="shell" style="background:#fff;">
<h1 style="text-align: center;">Training</h1>
<span v-if="grades.data.length == 1">
</span>
<span v-else>
<select v-model="grade" #change="onChange" class="field" style="width:40%">
<option v-for="(item, key) in grades.data" :value="item.id"> {{item.name}}
</option>
</select><br><br><br>
</span>
<div class="search-container" style="text-align: center;">
<inertia-link href="/training" style="float: right;">Back</inertia-link>
<form #submit.prevent="filterdata()">
<input id="search" class="field" placeholder="Search DeepRoots Training" style="width:40%" maxlength="255" type="text" v-model="request.filter['name']" >
<input class="btn btn-green" style="margin-right:2%" type="submit" value="Search">
<input class="btn btn-green" style="margin-right:2%" #click.prevent="reset()" type="submit" value="Reset">
</form>
</div>
<span v-if="videos.data == ''">
<h5 style="color:red;">Videos not found for this grade!!</h5>
</span>
<span v-else>
<h1 style="text-align: center;">{{ videoTitle}}</h1>
<div class="container" style="display: flex; height: 100px;">
<div>
<br>
<ul id="playlist" v-for="(video,index) in videos.data" :key="index">
<div v-for="(view,key) in videoView" :key="key">
<span v-if="view.training_video_id == video.id">
<div class="video-block" style="border-style: groove;background-color:powderblue;">
<span>{{ index+1 }}</span>
<span v-if="video.type == 2">
<img :src="videoImage" width="80" height="80" alt="">
<span>{{ cleanAndTrim(video.name) }}</span>
<li>
<ul>
<button #click.prevent="changeVideo(video, index)" class="btn btn-green" >Choose Video 1</button>
<br>
<br>
</ul>
<ul>
<button #click.prevent="secondaryVideo(video, index+1)" class="btn btn-green" >Choose Video 2</button>
<br>
</ul>
</li>
</span>
<span v-else>
<a href="">
<img :src="videoImage" #click.prevent="changeVideo(video, index)" width="80" height="80" alt="">
</a>
<span>{{ cleanAndTrim(video.name) }}</span>
</span>
</div>
</span>
</div>
<div v-if="videoView == '' && index==0">
<div class="video-block" style="border-style: groove;background-color:powderblue;">
<span v-if="video.type == 2">
<img :src="videoImage" width="80" height="80" alt="">
<span>{{ cleanAndTrim(video.name) }}</span>
<li>
<ul>
<button #click.prevent="changeVideo(video, index)" class="btn btn-green" >Choose Video 1</button>
<br>
<br>
</ul>
<ul>
<button #click.prevent="secondaryVideo(video, index+1)" class="btn btn-green" >Choose Video 2</button>
<br>
</ul>
</li>
</span>
<span v-else>
<span>{{ index+1 }}</span>
<a href="">
<img :src="videoImage" #click.prevent="changeVideo(video, index)" width="80" height="80" alt="">
</a>
<span>{{ cleanAndTrim(video.name) }}</span>
</span>
</div>
</div>
</ul>
</div>
<div style="flex-grow: 1;">
<vue-core-video-player id="videoarea" :emit="['ended']" #ended="loaded" controls :src="src" ref="video" :autoplay=false></vue-core-video-player>
<h1>About This Tutorial</h1>
<span v-if="checkNextVideo == true">
<h1>Next video:</h1>
<div style="border-style: groove;background-color:powderblue; width:40%;height:40%;">
<span>{{ nextTitle }}</span>
<button style="float:right;" #click.prevent="nextVideo(key++)">Watch</button>
</div>
</span>
<span v-if="checkNextVideo == false">
</span>
</div>
</div>
</span>
</div>
</div><br>
<div class="space"></div>
</app-layout>
</template>
<script>
import AppLayout from '../../Layouts/AppLayout'
import Pagination from '../../Pages/Common/Pagination'
export default {
props: [
'videos',
'request',
'grades',
'videoView',
'status',
],
components: {
AppLayout,
Pagination
},
data() {
return {
key: 1,
src: this.videos.data[0] == null ? '' : (this.status == '' ? this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0].media['filename'] : this.$page.props.baseUrl +'/storage/videos/' + this.status[0]['training_video']['media']['filename']),
secondVideo: this.videos.data == '' ? '' : (this.videos.data[0]['second_video'] == null ? '' : this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0]['second_video']['filename']),
videoTitle: this.videos.data[0] == null ? '' : (this.status == '' ? this.videos.data[0].name : this.status['0']['training_video']['name']),
videoImage: this.$page.props.baseUrl + '/assets/images/img/video.jpg',
nextTitle : this.videos.data.length <= 1 ? '' : this.videos.data[1].name,
grade: this.request.gradeId,
videoElement: null,
end: null,
}
},
methods: {
changeVideo(video, index) {
this.src = this.$page.props.baseUrl +'/storage/videos/' + video.media.filename;
this.videoTitle = video.name;
this.key = index;
if(this.videos.data.length-1 == index) {
index = 0;
this.nextTitle = this.videos.data[0].name;
} else {
this.nextTitle = this.videos.data[index+1].name;
}
},
secondaryVideo(video, index) {
this.src = this.$page.props.baseUrl +'/storage/videos/' + video.second_video.filename;
this.videoTitle = video.name;
if(this.videos.data.length-1 == this.key) {
this.key = 0;
let index = 0;
this.nextTitle = this.videos.data[index+1].name;
} else {
this.nextTitle = this.videos.data[index].name;
}
},
nextVideo(n) {
if(this.videos.data.length <= n) {
n = 0;
this.key = n;
}
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[n].media['filename'];
this.videoTitle = this.videos.data[n].name;
this.nextTitle = this.videos.data.length-1 <= n ? this.videos.data[0].name : this.videos.data[n+1].name;
},
filterdata() {
this.$inertia.get(this.route('training'), this.request)
},
onChange(event) {
this.$inertia.get('training?gradeId='+this.grade)
},
loaded(event) {
this.videoElement = event.target;
this.end = event.target.ended;
let index = this.key;
if(this.end == true) {
if(this.videos.data[index]['type'] == 0) {
if(this.videos.data.length-1 == index) {
this.key = 0;
this.videoTitle = this.videos.data[this.key]['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[this.key].media['filename'];
this.saveVideoStatus(this.videos.data[this.key]);
} else {
this.videoTitle = this.videos.data[index+1]['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[index+1].media['filename'];
this.saveVideoStatus(this.videos.data[index+1]);
this.key = index+1;
}
} else if(this.videos.data[index]['type'] == 1) {
console.log("its quiz");
} else if(this.videos.data[index]['type'] == 2) {
if(this.videos.data.length-1 == index) {
this.videoTitle = this.videos.data[0]['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0].media['filename'];
this.saveVideoStatus(this.videos.data[0]);
this.key = 0;
} else {
this.videoTitle = this.videos.data[index+1]['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[index+1].media['filename'];
this.saveVideoStatus(this.videos.data[index+1]);
this.key = index+1;
}
} else {
console.log("return");
}
//location.reload();
}
},
ended() {
this.videoElement.ended();
},
saveVideoStatus(status) {
this.$inertia.post(this.route('videoStatus') + '?gradeId='+this.grade, status)
},
reset: function () {
this.$inertia.get(this.route('training'));
}
},
computed: {
// a computed getter
checkNextVideo: function () {
let arr = [];
this.videos.data.forEach((video, index) => {
this.videoView.forEach((view, key) => {
if(view.training_video_id == video.id) {
arr.push(video.id);
}
});
});
if(this.videos.data.length == arr.length) {
return true;
} else {
return false;
}
}
},
created() {
if(this.videoView == '') {
this.grade = this.request.gradeId;
if(this.videos.data != '') {
this.saveVideoStatus(this.videos.data[0]);
}
} else {
this.videoView.forEach((view, index) => {
if(!view.user_id) {
this.saveVideoStatus(this.videos.data[0]);
}
});
}
if(this.status == '') {
this.videoTitle = this.videos.data[0]['media']['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.videos.data[0]['media']['filename'];
} else {
this.videoTitle = this.status['0']['training_video']['name'];
this.src = this.$page.props.baseUrl +'/storage/videos/' + this.status[0]['training_video']['media']['filename'];
this.videos.data.forEach((video, index) => {
if(this.status[0]['training_video']['id'] == video.id) {
this.key = index;
}
});
}
if(this.videos.data != '') {
if(this.videos.data.length-1 == this.key) {
this.key = 0;
this.nextTitle = this.videos.data[this.key].name;
} else {
this.nextTitle = this.videos.data[this.key+1].name;
}
}
}
}
</script>
<style scoped>
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
#videoarea {
align: center;
width:800px;
height:550px;
margin:10px;
border:1px solid silver;
}
.space { margin-top: 900px; }
</style>
when i select option from dropdown it will show me this error when i select option from dropdown it will show me this error
when i select option from dropdown it will show me this error when i select option from dropdown it will show me this error