How to deploy third-part VueJS component?

Question

I'm trying to deploy a Vue compenent called: bliblidotcom/vue-rangedate-picker.

So far I have done this: Installed compenent using npm:

npm install vuejs-datepicker --save

Added these lines into app.js

import Vue from 'vue';
import VueRangedatePicker from 'vue-rangedate-picker';
Vue.use(VueRangedatePicker);

Added this line to my component: Orders.vue

<rangedate-picker @events="events"></rangedate-picker>

However, I'm receiving:

dash.2f99f386cf46c2486e27.js:51996 [Vue warn]: Property or method "events" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[Vue warn]: Error in nextTick: "TypeError: Cannot read property '_withTask' of undefined" TypeError: Cannot read property '_withTask' of undefined

This is inside Orders.vue:

        </div>
    </div>
</template>
<script>
    export default {
        props: ['initUser'],
        data() {
            return {
                endpoint: '/approve',
                orders: [],
                btn: 'Update List',
                token: "",
                searched_term: "",
                today: false,
                from: "",
            }
        },
        computed: {....

This is inside app.js:

window.dashApp = new Vue({
    el: '#app',
    mounted(){
        this.$root.$on('mapCreated', function (map) {
            this.currentMap = map;
        });
    },
    data() {
        return {
            currentMap: null
        }
    },....

Answer 1

You need to define handler for your event. events is not defined in your component. At the moment, vue-rangedate-picker only support selected event

    <rangedate-picker @selected="onSelect"></rangedate-picker>

in Order.vue

    import VueRangedatePicker from 'vue-rangedate-picker';

     ...
    components: {
       'rangedate-picker': VueRangedatePicker
    }
    methods: {
      onSelect(data) {
        console.log(data)
      }
    }