Vue - mousedown trigger outside

// MyComponent.vue
<template>
    <div
        id="my-element"
        draggable="true"
        v-on:mousedown="onMousedown"
        v-on:dragstart="onDragStart"
    >
    </div>
</template>

<script>
    export default {
        methods: {
            onMousedown(e) {
                // do something
            },
            onDragStart() {
                // do something
            },
        }
    }
</script>

This code (above) works fine, onMousedown and onDragStart methods are called. But when I try from outside trigger mousedown or dragstart events in element, onMousedown and onDragStart methods are never called. Why?

// anotherScript.js
...
$("#my-element").trigger('mousedown');
// or
$("#my-element").trigger('dragstart');

I try to dynamically trigger an element's drag-and-drop event when it is clicked elsewhere on the page, unfortunately without any positive results ...