Something wrong in vue3 about granim.js

[6lszxz]

Okay, I have found a way to solve the problem. Just use the function nextTick( ).
The code is like this:

<script setup>
import Granim from 'granim';
import {ref, nextTick} from 'vue';
const logoCanvas=ref(null);
nextTick(()=>{
  const logoAnimation = new Granim({
    element: logoCanvas.value,
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#ff9966', '#ff5e62'],
                ['#00F260', '#0575E6'],
                ['#e1eec3', '#f05053']
            ]
        }
    }
  })
});
</script>
<canvas id="logoCanvas" ref="logoCanvas"></canvas>
</template>