Tengo un problema al acceder a canvas con vue refs. La referencia al lienzo no responde correctamente a la altura y el ancho del css aplicado (todavía tiene la propiedad anterior). Esto conduce a un contexto de lienzo (ctx) y un dibujo incorrectos. La solución parcial se muestra en la función "getPropperSize" en el código, pero tiene que haber una mejor manera. ¿Alguien tiene idea de lo que está pasando y por qué la variable myCanvas se comporta de manera extraña?

 <template> <h1>Canvas</h1> <button @click="getPropperSize">getPropperSize</button> <button @click="drawRect">drawRect</button> <canvas ref="myCanvas" id="canv"> </canvas> </template> <script> import { onMounted, onUpdated, ref } from 'vue' export default { setup() { const myCanvas = ref(null); console.log(myCanvas) let ctx = null onMounted(() => { //This will output 150 even it shuld be 500 console.log(myCanvas.value.height) ctx = myCanvas.value.getContext('2d') }) const getPropperSize = function(){ console.log(myCanvas.value.clientHeight) console.log(myCanvas.value.clientWidth) myCanvas.value.height = myCanvas.value.clientHeight myCanvas.value.width = myCanvas.value.clientWidth } const drawRect = function(){ ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); } return {myCanvas, getPropperSize, drawRect} } } </script> <style> #canv{ height: 50vh; width: 50vw; border: 3px solid #73AD21; } </style>