Skip to content

<script setup vapor>: component template ref is always undefined #14242

@lin52025iq

Description

@lin52025iq

Vue version

3.6.0-beta.1

Link to minimal reproduction

https://play.vuejs.org/#eNq9Ustu2zAQ/BWCl8hwSqVI0UMgqy/4kB7aos2RQKFIK5UJRRJ8qC4M/XuXpOW4QOve4oNF7g5nZ3dnT98Zw6YA9IZWHkYjGw81VwR/VSemwzFdP+jREAv9htMWj5yS8jR9H7zXirxtpWgfEdN0Haf1utVB+arM2YW5zNRVeVISr661wnjiwAdDZKMGpPEOC02N0RYxYsSvJ/sog8ykt3okF6j+4phKInOclfESm8M0V61WzpOonGzi++oW741q4e6Xgcrjn+7T87ouVk8PsA3EFyuyqck+y48JLYFJPRSRj02NDLAiZUmC6qAXCroFuWTfMCSKvHNsOzeKDdFLbBD5ejGwB6cVriEVySMWEuxn4wXW4/RmKY+jlVL//Jhi3ga4XOLtD2gf/xJ/cLsY4/SLBQd2Ak6POd/YAXxOb799gh2ej8lRd0Ei+kzyK+AsQtSYYe9xBCj7BJfU3qb1CDXcue3Og3JLU1FoRM4JzymuKy7hX60/yb1mr9I7HClOcVn1/32cDImM+3wiMzI8h4nP23dxZ1SU7FlcoVnOWBCB2VnrdTIVPzhvuzPaQXHARf1qRqY/Pfd9Ahs3gNO6Zq/Z1Yt78A17Seff5DdVBQ==

Steps to reproduce

App.vue

<template>
  <div>
    <Comp ref="comp" />
    <button @click="addB">+b</button>
  </div>
</template>

<script setup lang="ts" vapor>
import { ref } from 'vue'
import Comp from './Comp.vue'

const comp = ref<InstanceType<typeof Comp>>()

const addB = () => {
  console.log(comp.value) // is undefined in vapor mode
  comp.value?.add()
}
</script>

What is expected?

In vapor mode:

comp.value should reference the child component instance after mount

Exposed methods (defineExpose) should be callable

Behavior should be consistent with non-vapor mode, or clearly documented if unsupported

What is actually happening?

In vapor mode:

comp.value === undefined

Component instance and exposed methods are not accessible

In non-vapor mode:

Works as expected

System Info

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.interopvdom / vapor interopscope: vaporrelated to vapor mode

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions