Vuex state updated but input value does not when using v-model

Question

I'd like to slice input value when the value is longer than limit length.

Of course I know there's maxlength property in input field, but I want show alert popup when the length exceeds the limit. When I set maxlength as I want the user to type, the popup-showing function was not called.

<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>

All the other parts work, but when the length of title exceeds 10, the state is updated while input field is not changed.

Answer 1

I found a solution.

Why title is not updated is, when I slice the string, anyway title remains as it is.

vm.$forceUpdate works in this case.