How to modify Vue.js input element value from console

Question

Given the following code below where <v-input> is a custom input element,

<template>
    <v-input id="username" type="text" v-model="username" />
</template>

<script>
export default {
    data() {
        return {
            username: "",
        };
    },
};
</script>

How would one go about modifying the value of the input element through the browser console? I have tried the following code below but it does not bind to the Vue component.

const element = document.querySelector("#username");
element.value = "foobar"

I've also tried emitting custom events but those don't seem to work for me either. Any advice regarding this would be much appreciated.

Answer 1

I figured it out, I need only dispatch a new input event so that Vue.js catches the value. See below for an example.

const inputBox = document.querySelector("#inputBox");

inputBox.value = "hello";
inputBox.dispatchEvent(new Event('input'));