Back
VueMediumNew

What does `defineExpose` do and why is it needed?

script setup components are private by default

Ideal Answer

Components using <script setup> are 'closed' by default — their internal bindings aren't accessible to a parent via template refs, unlike Options API components. defineExpose explicitly exposes specific properties/methods to the parent:

JavaScript
<script setup>
import { ref } from 'vue'

const count = ref(0)
function reset() { count.value = 0 }

defineExpose({ reset })
</script>

The parent can then call childRef.value.reset() via a template ref, without exposing the entire internal state of the child.