Something wrong in vue3

[6lszxz]

I have a project using vue3, and here is part of my code:

<script setup>
import Granim from 'granim';
const logoAnimation = new Granim({
  element:'.logoCanvas',
})
</script>

<template>
  <div class="list">
    <canvas class="logoCanvas"></canvas>
    </div>

  </div>

</template>

The browser throws an error with Uncaught (in promise) Error:.logoCanvascould not be found in the DOM, how to solve the problem. :(

[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>