Состояние Vuex обновлено, но входное значение отсутствует при использовании v-модели

Question

Я хотел бы нарезать входное значение, когда значение превышает предельную длину.

Конечно, я знаю, что в поле ввода есть свойство maxlength, но я хочу показывать всплывающее окно с предупреждением, когда длина превышает предел.Когда я устанавливаю maxlength так, как я хочу, чтобы пользователь печатал, функция показа всплывающих окон не вызывалась.

<template>
    <input type="text" v-model="title">
</template>

<script>
    export default {
        data() {
            return { MAX_LENGTH: 10 };
        },
        computed: {
            title: {
                get() { return this.$store.getters.title; },
                set(title) {
                    if (title.length > this.MAX_LENGTH) {
                        alert('Too long!!');
                        // This part doesn't work as I wanted
                        this.$store.commit('updateTitle', title.slice(0, this.MAX_LENGTH);
                    } else {
                        this.$store.commit('updateTitle', title);
                    }
                }
            }
        }
    }
</script>

Все остальные части работают, но когда длина заголовка превышает 10, состояниеобновляется, пока поле ввода не изменяется.

Answer 1

Я нашел решение.

Почему title не обновляется, когда я срезаю строку, в любом случае title остается без изменений.

vm.$forceUpdate работает в этом случае.