The cropperImage.$ready()is called without it being ready.

[genu]

Describe the bug
I think there is a weird race condition happening when trying to set initia values after image has loaded.

I'm implementing V2 in vue as so:

onMounted(async () => {
  await nextTick();

  await cropperImage.value!.$ready();
  cropperImage.value!.$center('contain').$zoom(-0.1); // <--- Doesn't work
  setTimeout(() => {
    cropperImage.value!.$center('contain').$zoom(-0.1); <-- // Works
  }, 0);
});

Expected behavior
I expect that after calling $ready I should be able to performa any action on image

Desktop (please complete the following information):

• OS: MacOS
• Browser safar

[fengyuanchen]

How about this:

onMounted(async () => {
  await nextTick();
  await cropperImage.value!.$ready();
  await nextTick(); // Wait for next tick
  cropperImage.value!.$center('contain').$zoom(-0.1); // <--- Does it work?
});

[rhys-dm]

I had occasional glitches with code such as this.

cropper.getCropperImage().$ready(
          (image) => {
            image.addEventListener("load", (_) => {
              console.log("maybe ready");
            });
          }
        );

Now it's deferring to nextTick which, so far, has fewer glitches.

cropper.getCropperImage().$ready((_) => {
          nextTick(this, () => {
              console.log("maybe ready");
          });
        });