我在一个nuxt项目中使用vue 3 template refs，使用composition API，就像我对其他组件所做的那样，这些组件似乎工作得很好。但是，在这种情况下，它们返回null。
下面是我的模板：

<template>
    <div class="horizontal-scroll-fix" ref="container">
        <div class="horizontal-scroll-fix__scroll-fix">
            <container class="horizontal-scroll-fix__container">
                <div class="horizontal-scroll-fix__viewport" ref="viewport">
                    <div class="horizontal-scroll-fix__wrapper" ref="wrapper">
                        <slot></slot>
                    </div>
                </div>
            </container>
        </div>
    </div>
</template>

<script>

    import { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue';

    export default { // tried also to use shorthand <script setup> but no luck either
        setup() {
            const container = ref(null);
            const wrapper = ref(null);
            const viewport = ref(null);

            onMounted(() => {
                if (process.client) {
                    console.log(container?.value) // returns undefined
                }
            });

        }
    }

</script>

字符串
console.记录ref对象将返回以下内容：

RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: undefined, _value: undefined}

型
UDPDATE
我已经被告知，我需要在设置脚本结束时返回裁判。然而，令人困惑的是，我的项目中的所有其他组件都没有这样做，但工作正常。那么我没看到的这个有什么不同呢下面是另一个组件的例子，它的模板引用工作得很好，并且不返回值：

<template>
    <container>
        <div :class="'sequence sequence--'+section.displayAs">
            <div class="sequence__content" ref="content">
                // removed inner content for the purpose of demonstrating
            </div>
        </div>
    </container>
</template>

<script setup> 
    import { ref, computed, onMounted, onUnmounted } from 'vue';
    const props = defineProps({
        section: {
            required:true,
            type:Object
        }
    });

    const isDesktop = ref(false);
    const currentSectionIndex = ref(0);
    const fixedVisual = ref(null);
    const content = ref(null);

    function initMediaQuery() {
        const mediaQuery = window.matchMedia('(min-width:1024px)');
        checkDeviceSize(mediaQuery);
        mediaQuery.addListener(checkDeviceSize);
        
    };
    function checkDeviceSize(query) {
        if (query && query.matches) {
          isDesktop.value = true
        } else {
          isDesktop.value = false
        }
    };
    function initObserver() {
        if (props.section?.displayAs === 'timeline' && isDesktop) {
            console.log(isDesktop);
            const target = fixedVisual;
            const sections = content?.value.querySelectorAll('.sequence__section');
            if (target && sections?.length) {
                let callback = (entries, observer) => {
                    entries.forEach((entry,index) => {
                        if (entry.isIntersecting) {
                            currentSectionIndex.value = parseInt(entry.target.getAttribute('data-index'));
                        }   
                    })
                }
                let options = {
                    rootMargin: '0px',
                    threshold:1.0
                }
                let observer = new IntersectionObserver(callback,options);
                sections.forEach(section => {
                    observer.observe(section);
                });
            }
        }
    }

    onMounted(() => {
        if (process.client) {
            initMediaQuery();
            initObserver();
            window.addEventListener("resize", initObserver);
        }
    });

    onUnmounted(()=> {
        if (process.client) {
            window.removeEventListener("resize", initObserver);
        }
    });
    


</script>

型