Vuetify | Values does not persist using DOM methods

Question

I am using Vuetify form fields like v-text-field or v-text-area and I have a use case in which am trying to directly update the value of the input fields using DOM methods document.querySelector directly.

And the issue am facing is whenever the focus is changed the field values for example v-text-area becomes blank or reset to original value.

App.vue

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="msg" />
    </v-container>
  </v-app>
</template>

Steps to reproduce:

1. Refer the above code or go to this link.
2. Open the Console (dev tools) and simply try to add value using: document.querySelector('#input-0').value = 'test'

Result: The value is applied to the textfield but once you click somewhere or focus is changed then the value is reset.

I suspect this is because of state. But is there any way to achieve the behaviour using DOM methods and attributes ?

Purpose behind trying the DOM Methods: The reason am trying to this experiment is because in my selenium automation tool. I want to programmatically type some text inside the form fields. I know there is a method provided by selenium sendkeys:

driver.findElement(By.xpath("some xpath")).sendKeys("Test");

But this takes time when I want to add some large text. So, I am trying to achieve this behaviour using JavascriptExecutor:

 JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
WebElement element = driver.findElement(locator);
jsExecutor.executeScript("arguments[1].value=arguments[0]", "'" + text + "'", element);

But, it seems the above code does not work because of the DOM methods issue mentioned on the top.

Let me know if there is any solution in vuetify or Selenium