Vue.jsのコンポーネントの中の要素にアニメーションを入れたい

お世話になっております。
laravel+Vue.js
で作成したサイトでAniJSを使用して、ページを開いた際にアニメーション + モーダルを入れたいと考えております。
また、その部分の値を動的にしたいので、Vue.jsのコンポーネントで記したいと考えているのですが、①のソースですと、アニメーションは動作しましたが、範囲が狭く、②のソースですと、アニメーションが動作しません(モーダルは動作しました)。アニメーションとVue.jsを両立するにはどのようにすれば、おわかりになる方いらっしゃいましたら、よろしくお願いします。

①

    <div class="container">
        <h2 class="mt-3" data-anijs="if: scroll, on:window, do: flipInX animated, before: scrollReveal"><img src="/images/service/logo_r.png" alt="Service"></h2>
        <!-- モーダルを開くボタン・リンク -->
        <div class="row mb-5">
            <div class="col-md-6 col-sm-12" data-anijs="if: scroll, on:window, do: fadeInLeft animated, before: scrollReveal"><img class="img-fluid" src="images/sec02_01.jpg"></div>
            <div class="col-md-6 col-sm-12" data-anijs="if: scroll, on:window, do: fadeInRight animated, before: scrollReveal">
                  <div><span data-toggle="modal" data-target="#Modal01">モーダル1</span></div>
            </div>
        </div>
        <div id="App">
            <service-component></service-component>
        </div>
    </div>
    <!-- /.container -->
</section>
・
・
<template>
  <div>
    モーダルの画面
  </div>
</template>

②

<section id="service">
        <div id="App">
            <service-component></service-component>
        </div>
</section>
・
・
<template>
  <div>
    <div class="container">
        <h2 class="mt-3" data-anijs="if: scroll, on:window, do: flipInX animated, before: scrollReveal"><img src="/images/service/logo_r.png" alt="Service"></h2>
        <!-- モーダルを開くボタン・リンク -->
        <div class="row mb-5">
            <div class="col-md-6 col-sm-12" data-anijs="if: scroll, on:window, do: fadeInLeft animated, before: scrollReveal"><img class="img-fluid" src="images/sec02_01.jpg"></div>
            <div class="col-md-6 col-sm-12" data-anijs="if: scroll, on:window, do: fadeInRight animated, before: scrollReveal">
                <ul class="list">
                    <div><span data-toggle="modal" data-target="#Modal01">モーダル1</span></div>
                </ul>
            </div>
        </div>
        モーダルの画面
    </div>
    <!-- /.container -->
  </div>
</template>

フッタ部分

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- AniJS core library -->
<script src="https://anijs.github.io/lib/anijs/anijs-min.js"></script>
<!-- ScrollReveal Helper-->
<script src="https://anijs.github.io/lib/anijs/helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script>
<!-- Parallax library -->
<script src="js/parallax.min.js"></script>
<!-- スムーズスクロール部分の記述 -->
<script src="js/smoothscroll.js"></script>

</body>
</html>