vue3 component api でCropperが使えない

Question

cropperjsというトリミングのライブラリを使いたいのですが動作しません。

new Cropper(img as HTMLImageElement)を実行すると、添付画像のように3つ画像が表示されます。
※操作もできない

環境
vue 3.0.0-beta.1
cropperjs 1.5.11

問題のコードはこちらです。

<style>
img {
    max-width: 100%;
}
</style>

<template>
    <div>
        <img ref="refImage" src="assets/google.png"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import Cropper from 'cropperjs'

export default defineComponent({
    setup() {
        let refImage = ref(null)

        onMounted(() =>{
            new Cropper(refImage.value,{
                aspectRatio: 1
            })
        })

        return {
            refImage
        }
    },
})
</script>

丸１日つまってしまい、どうすればいいかわからない状態です。
どうかお力をお貸しいただけないでしょうか。

Answer 1

申し訳ございません、自己解決しました...
一度質問してみると冷静になって解決してしまうというパターンです...

cropperjsは合わせてcssもダウンロードして設定する必要があり、そちらを読み込むことで正常に動作しました。

画面がうまく表示されてない所からcssを疑うべきでした...