There's a component with a method that is called upon creation. It utilizes the vue-select library, but the specific purpose of this component is not relevant to the issue at hand.
<template>
<v-select :on-change="onchangecallback"></v-select>
</template>
<script>
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect);
export default {
methods: {
onchangecallback: () => {alert('default')}
},
created: function() {
this.onchangecallback();
}
}
</script>
In another file, I import this component and create a new instance using the Vue constructor. I pass in a new onchangecallback method, expecting it to override the default one:
import VSelect from './components/ui/VSelect.vue';
new Vue({
VSelect,
el: '#app',
components: {VSelect},
template: `<v-select />`,
methods: {
onchangecallback: () => {alert('custom')} // doesn't work
}
});
However, when I run the app, instead of displaying alert('custom'), I still see alert('default').