refs not working on custom component

[TheDutchCoder]

When I extract meshes/groups into Vue components, I can't seem to be able to use refs on the custom component.

Example:

Thing.vue

<template>
  <Group>
    <Box>
      <LambertMaterial color="#222222" />
    </Box>
  </Group>
</template>

<script setup>
import { Group, Box } from 'troisjs'
</script>

App.vue

<template>
  <Renderer ref="rendererC" antialias :orbit-ctrl="{ enableDamping: true }" resize="window" shadow>
    <Camera ref="camera" :position="{ x: 10, y: 10, z: 10 }" />
    <Scene>
      <Thing ref="thing" />
    </Scene>
  </Renderer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Renderer, Camera, Scene } from 'troisjs'

import Thing from './components/thing.vue'

const thing = ref()

onMounted(() => {
  console.log(thing.value) // This seems to be a complete empty ref with a `__v_skip` attribute
})
</script>

[RingoKam]

Yup ran into the same issue as well

[klevron]

You should try :

Thing.vue

<template>
  <Group>
    <Box ref="box">
      <BasicMaterial color="#222222" />
    </Box>
  </Group>
</template>

<script setup>
import { ref } from 'vue'
import { Group, Box, BasicMaterial } from 'troisjs'

const box = ref()

defineExpose({ box })
</script>

App.vue

onMounted(() => {
  console.log(thing.value.box)
})

https://vuejs.org/api/sfc-script-setup.html#defineexpose