[Vuejs]-Using Vue3 Reactivity Transform macros and defineExpose() breaks the ref's reactivity

by

0👍

✅

Here’s what I found by digging deeper in the Vue docs:

While reactive variables relieve us from having to use .value everywhere, it creates an issue of "reactivity loss" when we pass reactive variables across function boundaries.

To remedy this, they have $$(). Using it during defineExpose() solves my issue.

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

<script setup>
  const text = $ref('hello');
  defineExpose(
    $$({ text })
  )
</script>

Working example on Vue playground

Leave a comment