Composition-api: fix: emit update:modelValue not works

Created on 25 Mar 2021 · 2Comments · Source: nuxt-community/composition-api

🐛 The bug
It looks like the breaking changes on v-model on Vue 3 are not enabled or not working.

The issue happens when you create a component with has v-model. According with this Vue docs the props and the emit value are been changed, and as described in the docs, it is a breaking change:

prop: value -> modelValue;
event: input -> update:modelValue;

Therefore, value has been changed to modelValue and input to update:modelValue

🛠️ To reproduce
Steps to reproduce the behavior:

Create a simple input component with Composition API and then emit the update:modelValue event.

InputTest.vue

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

<script lang="ts">
import { defineComponent, computed } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    modelValue: String,
  },

  setup(props, { emit }) {
    const message = computed({
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
    })

    return {
      message,
    }
  },
})
</script>

Use the component and try to type something to change the text inside the h1 tag.

<template>
  <div>
    <h1>{{ sampleData }}</h1>
    <InputTest v-model="sampleData" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'
import InputTest from '@/components/InputTest.vue'
export default defineComponent({
  components: {
    InputTest,
  },
  setup() {
    const sampleData = ref<string>('Sample Data')

    return {
      sampleData,
    }
  },
})
</script>

🌈 Expected behaviour
The expect is the child component emit changes to the parent component and the parent component should react to the update:modelValue event. The strange part is that the same code works when I change emit('update:modelValue', value) to emit('input', value).

ℹ️ Additional context