Почему input.value не меняется второй раз

Проблема в том, что vue при привязке данных использует отслеживание зависимостей и меняет только то, что изменилось.

Когда вы одному и тому же свойству val раз за разом присваиваете одно и то же значение - оно не меняется, а потому не вызывает обновления биндингов.

Привязку данных следует применять только в тех случаях когда есть лишь один источник изменений в один момент времени, а не когда два источника данных (вы и пользователь) "дерутся" за одно и то же свойство.

v-model же работает потому что в свойство val записываются сначала данные от пользователя, потом ваши. Но это не решение: использовав v-model вы больше не сможете гарантировать что в свойстве val находится именно то что вам нужно.

Правильно в таком случае работать с элементом напрямую.

PS если вы пытаетесь таким хитрым образом сделать фильтрацию вводимых символов - лучше блокируйте нежелательные символы через preventDefault() а не через присвоение value. Присвоение value сбрасывает текущее положение текстового курсора.

Есть два варианта:

A. Использовать v-model для двустороннего связывания:

<input v-model="val" v-on:input="updateValue($event.target.value)">

B. Создать ссылку на input:

<input ref="input" v-bind:value="val" v-on:input="updateValue($event.target.value)">

и в методе updateValue явно обновлять значение поля ввода:

this.$refs.input.value = this.val;

Документация