vue.jsのレンダリングが終了してから外部Javascriptのファイルを読み込みたい

お世話になっております。
表題の件でご相談したいと思っております。

下記のソースで
1.aaa-componentのレンダリングが完了
2.aaa.jsを読み込む
の順で実行したいのですが、方法はあるのでしょうか？

html内/component内
どちらの操作でも構いません。
おわかりになる方いらっしゃいましたら、よろしくお願いします

<html>
<head>
・・・・
</head>
<body>
<aaa-component></aaa-component>
<script src="aaa.js">
</body>
</html>

maisumakun

2020/06/08 01:59

> html内/component内どちらの操作でも構いません。 aaa.jsを書き換える選択肢はないのですか？

kutu

2020/06/08 02:04

サイト外ライブラリですので書き換えることは出来ません

行動規範の内容に同意します

回答1件

やりたいことが充足できるかどうかはちょっとわかりませんが、

Vueのライフサイクルフックにmountedがあります。
https://jp.vuejs.org/v2/api/#mounted
インスタンスがドキュメントにマウントされた後（DOM構築後？）に呼ばれるイベントです。
ただしすべての子コンポーネントがマウント完了になっているかどうかは保証されないようで、DOMの更新を確実に待ちたい場合はthis.$nextTickを使うようにとのことです。
https://jp.vuejs.org/v2/api/#vm-nextTick

以下のコードを実装すると、テンプレートで作成されたテーブルのtd要素が取得できました。つまりテンプレートのDOM構築後にコードが実行されたことになります。
（コードはNuxtですが本質は変わりないでしょう）
$nextTickのインライン関数内に外部スクリプトを読み込むコードを書けば行けるのではないかと思います。

vue
1<template>
2<v-app id="test">
3  <v-data-table
4   :
5   :
6  </v-data-table>
7</v-app>
8</template>
9export default {
10    mounted: function(){
11        console.log('mounted!');
12        this.$nextTick(function(){
13            console.log('nexttick');
14            var elems = document.getElementsByTagName('td');
15            console.dir(elems);
16        });
17    },
18}