How to update Masonry on Vue.js 3 updated() lifecycle hook?

Question

I have a question regarding the Masonry layout update. How can I trigger it in the Vue.js (Version 3) lifecycle hook "updated()"?

I have a card grid view like in the following code (using Bootstrap 5 here), but struggle to update the Masonry layout when e.g. a card changes its size. I know that I can use layout() see documentation but I don't know how to call it in my example.

So my main problem is, that I don't know how to make my Masonry object accessible in the updated function when initialized in the mounted() function. How do I do that?

<template>
  <div
    class="row justify-content-left"
    data-masonry='{"percentPosition": true }'
  >
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 1 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 2 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 3 />
    </div>
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
      <Card 4 />
    </div>
  </div>
</template>

<script>
[imports ...]

export default {
  name: "ComponentName",
  components: {
    [components ...],
  },
  mounted: function () {
    // initialize masonry
    this.$nextTick(function () {
      var row = document.querySelector("[data-masonry]");
      new Masonry(row, {
        // options
        percentPosition: true,
      });
    });
  },
  updated: function() {
    //-->how to call the relayout of Masonry here?
  }
};
</script>