How to customize interpolation rendering in Vue 3?

[rick-hup]

React Example

In React, components can handle children rendering directly:

// React with motion
export default function Counter() {
  const count = useMotionValue(0)
  const rounded = useTransform(() => Math.round(count.get()))
  useEffect(() => {
  const controls = animate(count, 100, { duration: 5 })
  return () => controls.stop()
  }, [])
  return <motion.pre>{rounded}</motion.pre>
  // motion.pre can handle how children are rendered
}

Current Vue Behavior

In Vue 3, interpolation is always compiled to _toDisplayString:

<template>
  <div>{{ someValue }}</div>
</template>
<!-- Compiled to -->
function render() {
  return toDisplayString(someValue)
}

Question

Is it possible to achieve similar behavior in Vue where components can control how interpolated content is rendered?

For example, I'd like to do:

<template>
   <motion-pre>{{ count }}</motion-pre>
   <!-- Let motion-pre handle the rendering -->
</template>

Any suggestions or insights would be appreciated!