How defineModel simplifies v-model in custom Vue components

olehhladkov — Wed, 25 Feb 2026 22:35:33 +0000

In this article, I show a practical use case: a custom modal component where defineModel controls visibility — no props, no emit, no boilerplate.

TL;DR:

defineModel replaces the traditional modelValue + update:modelValue pattern with a single reactive binding.

When Vue introduced defineModel, it looked nice in theory, but I wanted to see how it feels in a real component.

So instead of a contrived counter example, I tried it with something we all build at some point: a modal.

The modal itself uses the native <dialog> element, but that’s not the main point here.
The interesting part is how clean the component API becomes with defineModel.

The Goal

I want to be able to write this:

<MyModal v-model="isModalOpen" />

…without writing:

modelValue prop
update:modelValue emit
extra sync logic

Just v-model and done.

Demo

👉 Live demo (StackBlitz)

App.vue

<script setup>
import { ref } from 'vue';
import MyModal from './components/MyModal.vue';

const isModalOpen = ref(false);
</script>

<template>
  <main>
    <button @click="isModalOpen = true">Open Modern Modal</button>

    <MyModal v-model="isModalOpen">
      <h1>Custom Content</h1>
      <p>This replaces the default slot content!</p>
    </MyModal>
  </main>
</template>

Nothing special here:

isModalOpen is just a ref
v-model controls the modal
slot lets us pass custom content

The parent component doesn’t care how the modal works internally.

MyModal.vue

<script setup>
import { useTemplateRef, watchEffect } from 'vue';

// The magic: Two-way binding in one line
const isVisible = defineModel({ default: false });
const modal = useTemplateRef('modal');

watchEffect(() => {
  if (!modal.value) return;

  isVisible.value ? modal.value.showModal() : modal.value.close();
});
</script>

<template>
  <dialog ref="modal" @close="isVisible = false">
    <slot>
      <h1>Default Modal Title</h1>
      <p>This is the default content of your slot.</p>
    </slot>
    <button @click="isVisible = false">Close</button>
  </dialog>
</template>

The Important Part: `defineModel`

This line is doing all the work:

const isVisible = defineModel({ default: false });

That gives us:

a reactive value
automatic v-model support
two-way binding
zero emit code

Before, we had to write:

defineProps({ modelValue: Boolean })
defineEmits(['update:modelValue'])

Plus sync logic between them.

Now it’s literally one line.

Why This Is a Good `defineModel` Use Case

A modal is perfect for this because:

it has a single source of truth (open / closed)
parent wants control
component wants internal control (close button, ESC key, etc.)

With defineModel, both sides can update the same value:

Parent opens it
Modal closes itself
State stays in sync automatically

No custom events. No glue code.

What This Shows About `defineModel`

Using defineModel makes custom components feel closer to native inputs:

clean API
predictable behavior
minimal code
less mental overhead

Instead of thinking in terms of:

“prop + emit + sync”

You just think:

“this component has a value”

When This Pattern Makes Sense

Good fit when:

component has a single main state
parent and child both need to update it
you want a clean v-model API

Examples:

modal
toggle
tabs
drawer
select
stepper

Final Thoughts

defineModel is small, but it changes how custom components feel to write.

Instead of ceremony, you get:

one line
one state
one API

This modal is just a convenient example of that.

If you haven’t tried defineModel yet, I highly recommend giving it a shot in a real component.
It removes a lot of the friction around v-model and makes custom components easier to reason about.

If you have other use cases for defineModel or ideas to improve this example, I’d love to read them in the comments.

DEV Community: olehhladkov