Vue3+bootstrap5瀑布流，Masonry不生效的原因和解决方案

在Bootstrap 5.1.x的新版本中，官方提供了基于masonry的瀑布流解决方案，详见https://getbootstrap.com/docs/5.1/examples/masonry/。

根据教程，将以下js链接添加到 index.html，然后将 data-masonry=‘{“percentPosition”: true }’ 加到.row的代码块中

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

结果发现瀑布流的效果不生效，盲猜应该是没有动态加载的问题，于是google了一下，找到如下兼容VUE的解决方案。
首先，安装masonry依赖。

npm install masonry-layout

第二步，加载包

import Masonry from "masonry-layout"

第三步，初始化masonry

...
  mounted() {
    // initialize masonry
    var row = document.querySelector("[data-masonry]");
    new Masonry(row, {
      // options
      percentPosition: true,
    });
  },
...

最后一步，在.row标签中加入data-masonry元素

data-masonry='{"percentPosition": true }'