Vue 3 + Tagify - Use a v-bind binding combined with a v-on listener that emits update:x event instead

Question

I have problem with latest vue3(3.3.8) and latest Tagify(4.17.9) Im trying to use Tagify in Vue 3 but i get error:

VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
at /src/components/tagify.vue:2:49
1  |  
2  |    <textarea v-if="mode === 'textarea'" v-model="value"/>
   |                                                  ^^^^^
3  |    <input v-else :value="value" v-on:change="onChange">
4  |  

How i can fix this?

Answer 1

Props are read-only, as the error states. Use a writable computed property for the v-model as described in the Vue documentation.

props: {
  mode: String,
  settings: Object,
  modelValue: [String, Array],
},
computed: {
  value: {
    get() {
      return this.modelValue;
    },
    set(value) {
      this.$emit("update:modelValue", value);
    },
  },
},

<textarea v-if="mode === 'textarea'" v-model="value" />
<input v-else v-model="value" />

updated codesandbox.

I also fixed the change event, it should be a normal listener, not binded like a prop. You'll find the code works now so that when the tags are updated the onTagsChange is fired