Why don't the change and input events fire after changing the value value in input?

Question

Vue.js

I can’t understand why the change and input events do not fire if I change the value not manually, but by the method. Below is an example code. After pressing the button, the value value changes, but the event does not fire.

<template>
  <div>
    <input type="text" :value="text" @input="changeInput" />
    <div @click="mychange">Button</div>
  </div>
</template>

<script>
export default {
  name: "Input",
  data() {
    return {
      text: "default"
    };
  },
  methods: {
    changeInput: function() {
      console.log("change");
    },
    mychange: function() {
      console.log("button");
      this.text = "not default";
    }
  }
};
</script>

Answer 1

Firstly, because the events do not work at all - none and never. Saying "an event fires" is illiterate. Event handlers fire. Secondly, you change the value by clicking on the button, and not by typing it into the input. That is, those events that you are waiting for - they do not occur, there is nothing to process.
If you want to watch for any value changes - use v-model+ watch:
<input v-model="text">

watch: {
  text(newVal, oldVal) {
    console.log(newVal, oldVal);
  },
},

Answer 2

By event @inputit is necessary to change the value of the fieldtext

changeInput: function(event) {
      console.log(event);
      this.text = event.target.value
    },

Or use v-modelit - it does exactly the same thing, only under the hood