ifram status change only working when inspect with chrome devtools

I make an chrome extension. I get a URL passed from another site and I want to put the url into an input field. $('#myinput').val("url") is not working, because I guess a status is not activated and a button is not appearing to confirm the url.

I figured out, that when I use following code:

const EVENT_OPTIONS = {bubbles: true, cancelable: false, composed: true};


    const EVENTS = {
        BLUR: new Event("blur", EVENT_OPTIONS),
        CHANGE: new Event("change", EVENT_OPTIONS),
        INPUT: new Event("input", EVENT_OPTIONS),
    };

    const elem = $("#iframeMain .c-txt__input")
    
    elem.value = "www.myurl.com";
    elem.dispatchEvent(EVENTS.INPUT)

It is working, BUT only when I use the inspect from Google DevTools on the input. When I don't use the inspect function, I get this error:

VM3290:13 Uncaught TypeError: elem.dispatchEvent is not a function

I tried to figure out a few hours why this is happening but could not find a solution.

So the input is in a iframe and the input field looks like this

<input data-v-XXXXX="" data-v-XXXX="" type="text" placeholder="Paste URL" class="c-txt__input">