修改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);