How to declare global mixins and filters on Vue class based typescript component?

Question

I have a plugin file for Vue 2 which I use like so:

global-helpers.ts

import clone from 'lodash/clone'

class GlobalHelpers {
    install(Vue) {
        Vue.filter('clone', clone)
        Vue.mixin({
            methods: {
                clone,
            }
        })
    }
}

export default new GlobalHelpers()

globals.ts

import Vue from "vue"
import GlobalHelpers from './global-helpers.ts'
Vue.use(GlobalHelpers)

Products.vue :

import {Component, Vue} from 'vue-property-decorator'
import {State, Action} from 'vuex-class'

export default class Products extends Vue {
    cloneItem(item) {
            this.item = this.clone(item)
    }
}

This results in TS2339: Property 'clone' does not exist on type 'Products'.

I tried the following:

declare module 'vue/types/vue' {
    interface VueConstructor {
        clone: (item) => any
    }
}

declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
        clone: (item) => any
    }
}

But that does not seem to work... Can you please help me and explain how I should declare such properties on typescript?

Answer 1

Ok this has worked If I put this inside the global-helpers ts...

declare module 'vue/types/vue' {
    interface Vue {
        cloneDeep: (item) => any
    }
}