[Laravel6]JavaScriptが2回実行されるので原因を調べてみた

bladeでsection使ったりでテンプレートを複数階層化しようとして実験していた時に、どのテンプレートが呼ばれたかをjsを使って確認していたらなぜか2回実行されるんですよ。

ブラウザの開発者ツールを見てもソース内に1つしかないし、かなり悩みましたがどうやらvue.jsが原因のようでした。

実際書いていたのは↓の処理です。

<?php
<script type="application/javascript"> 
    alert("debug1");
</script>
?>

画面にアクセスすると2回ポップアップが表示されていました。

上のjsは<div id=”app”>の中に書かれていました。(意識してなかったのですが)

※vueは「php artisan ui vue –auth」を実行した時に入ったはず。

resources/js/app.jsに↓の記述があるので

const app = new Vue({
    el: '#app',
});

#appを#app2とかに変更＆npm run devを実行して、再度画面にアクセスすると

なんということでしょう。JSに実行が1回だけになりました。(ビフォーアフター風)

そもそも今はvue.jsをよくわかっていないですし、単にvue.jsってこういうものなのかもしれません。

知らない人ほどなんでだろうってハマってしまうと思うので、同じところで悩んでいる人に役立てば幸いです！