我一直在用vue3和bootstrap 5构建一个应用程序。使用bootstrap 5解决了响应问题，我决定用砖石布局进一步美化页面。它成功地安装在页面上，但是，当我再次刷新页面时，砖石布局的功能消失了。此外 Footer 组件似乎先渲染，然后渲染网格，如下图所示。

accordion 和Map位于顶层，因为它们的z索引集。我以前在使用bootstrap时没有任何问题，所以在使用bootstrap时可能会遗漏一些东西 masonry-layout ? 或者存在任何路由器问题？非常感谢您的帮助。
以下是相关代码的一部分：
[app.vue]

// the App routes to the Home.vue and NewsDetails.vue is the sub-component of Home.vue
<template>
  <div>
    <TheNavigation />
    <router-view /> <!-- routes to the ./views/Home.vue -->
  <Footer /> <!-- Footer component overlaps on the NewsDetails.vue -->
  </div>
</template>

[newsdetails.vue]

<template>
  <div class="container">
    <div class="row justify-content-center" data-masonry='{"percentPosition": true }'>
      <div class="col-lg-3 col-md-4 col-sm-col" v-for="(newsPiece, index) in newsCollection" :key="index">
        <div class="grid-item card shadow-sm mt-3 mx-1">
        <img :src="newsPiece.urlToImage" alt="image link lost">
        <h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
        <div class="card-footer">
          {{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import Masonry from "masonry-layout"
import imagesLoaded from 'imagesloaded'
  export default {
    name: 'NewsDetails',
    props: {
      newsCollection: {
        type: Array,
        required: true
      }
    },
    methods: {
      createMasonry() {
        // reference: imagesLoaded: https://github.com/desandro/imagesloaded
        // reference: possible item elements overlap: https://masonry.desandro.com/layout.html#imagesloaded
        var row = document.querySelector("[data-masonry]");
        new imagesLoaded(row,()=> {
          new Masonry(row, {
            percentPosition: true
          })
        })
      }
    },
    mounted() {
      this.createMasonry();
    }
  }
</script>