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

Делаю свой input, ввожу в него данные и он сразу их заменяет на "11.11", так у меня и должно быть. Но если после этой замены я продолжаю вводить данные, он перестаёт их заменять, этого я не понимаю.
У меня стоит v-bind:value="val" и по идее если я перезаписываю this.val он должен это отображать в инпуте. Сам val меняется, я его выводу, но не в инпуте.
Vue.component('currency-input', { template: ` val: {{val}} `, data: function() { return { val: "" }; }, methods: { updateValue: function(value) { this.val = "11.11"; } } }); // создание корневого экземпляра var app = new Vue({ el: '#app', template: `

`, })

Ответ

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

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