修改vue生成页面中input的值

为什么vue生成的页面，直接用document.getElementById("username").value修改input值没效果，我就不多做解释了，有效代码如下：

//vue项目需要手工触发input输入，修改才有效。

const usernameInput = document.querySelector('input[name=username]');

const passwordInput = document.querySelector('input[name=password]');

const event = document.createEvent('HTMLEvents');

event.initEvent('input', false, true);

usernameInput.value = 'abc';

usernameInput.dispatchEvent(event);

passwordInput.value = '123456';

passwordInput.dispatchEvent(event);