issue: getting canvas in composition api with <script setup>

[peterfoers]

I'm trying to get the result of my crop in my setup function. According to the docs, this is the way in options API const { coordinates, canvas, } = this.$refs.cropper.getResult();. The composition way of doing this is like so:

<script setup>
import { ref, onMounted } from 'vue';
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'

const cropper = ref(null) // Does not work
const title = ref(null) // Works 

onMounted(() => {
    console.log(cropper.value)
    console.log(title.value)
})

const cropperImage = ref('https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80')

</script>

<template>
    <h1 ref="title">Some Value</h1>
    <cropper
        ref="cropper" class="cropper" :src="cropperImage" 
        style="margin: auto;"
        :stencil-props="{
            aspectRatio: 1,
            movable: false,
            resizable: false,
            handlers: {},
        }"
        :resize-image="{
            adjustStencil: false,
        }"
        image-restriction="stencil"
        />
    <label for="image" value="Image" />
    <input type="file" name="image" ref="image" class="form-control" @change="setImage"/>
</template>

<style>
.cropper {
    height: 200px;
    width: 200px;
    background: #DDD;
}
</style>

For the Cropper I get many warnings: Component is missing template or render function, Invalid vnode type when creating vnode: null. Over and over again. And the Component doesn't render.

It works without the syntactic sugar:

<script>
import { ref, onMounted } from 'vue';
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'

export default {
    components: {
        Cropper,
    },
    setup() {
        const cropper = ref(null)
        const title = ref(null)

        onMounted(() => {
            console.log(cropper.value)
            console.log(title.value)
        })

        const cropperImage = ref('https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80')

        return {
            cropper,
            title,
            cropperImage,
        }
    },
}
</script>

Any help is greatly appreciated.

[Norserium]

@peterfoers , pie in the sky, but try to rename cropper to cropperRef:

const cropperRef = ref(null) // Should work

It looks, that it conflicts with the import of Cropper component.

[Norserium]

@peterfoers, any news?