Why don't standard methods work when input is changed from outside?

Question

Vue.js

Hi everybody.
I'm using vue 3
I have a button in a component that calls a popup with an iframe. The iframe also has a button, when clicked, the script sends data to my component, or rather, to the input. If you hang standard view events on this input, they do not see changes. It is not possible to change the script in an iframe.

template: `
<div>
  <input type="text" name="dirs" id="dirs" v-model="dirs" @change="checkDirs">
  <button>Открыть модальное окно</button>
</div>
`
data() {
  return {
    dirs: ''
  }
},
watch: {
  dirs(val) {
    console.log(val) // ничего не происходит
  }
},
methods: {
  checkDirs() {
    console.log('Done') // ничего не происходит
  }
}

Can this be fixed somehow?
Thanks

Answer 1

It has nothing to do with Vue. Changes to value via javascript do not trigger any events. No events - no reaction. Smart scripts designed to work in conjunction with others manually fire input\change events after a change. Your iframe script is probably not smart.
If there is no access to the script in the frame, the solution is only a crutch: manually monitor the input and trigger the necessary events, like this:
<input ... ref="input">

mounted() {
  const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
  Object.defineProperty(this.$refs.input, 'value', {
    ...valueDescriptor, 
    set(value) {
      valueDescriptor.set.call(this, value);  
      this.dispatchEvent(new Event('input', {
        bubbles: true,
        cancelable: true,
      }));
    } 
  })
}