Get image width and height working 50% of the time in vue js

I have this structure in a view file, in Vue js:

<template>
    <div class="myImageData">
       
    </div>
<template>

<script>
 export default {
     methods: {
         imageCrop: function(iiif) { 
           let image = new Image();
           image.src = iiif; 
           let width =  image.width; 
           let height = image.height;
           return image.src + " this is width " + width + " and this is height " + height
         }
     }
}

Sometimes I get the right height and width, but sometimes I get 0 and 0. Are there some caching problems? Is methods the right way to do this? I am new to Vue, so I don't understand very well how it works.

EDIT: If I use

 image.onload = () => {
       let height = image.height;
       let width = image.width;
       return image.src + " this is width " + width + " and this is height " + height
 }

Nothing appear on the page. I tried to put an error handling like that:

nameError: function(){
        try {
            const error = new Error();
            return error.message;
        } catch (ex) {
            return ex.message;
        }

and it generates an event with this in the DOM:

const invoker = (e) => { // async edge case #6566: inner click event triggers patch, event handler // attached to outer element during patch, and triggered again. This // happens because browsers fire microtask ticks between event propagation. // the solution is simple: we save the timestamp when a handler is attached, // and the handler would only fire if the event passed to it was fired // AFTER it was attached. const timeStamp = e.timeStamp || _getNow(); if (skipTimestampCheck || timeStamp >= invoker.attached - 1) { callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]); }

from Get image width and height working 50% of the time in vue js