結論

変数の定義だけ Blade に書いて、それ以降の Javascript に関する記述は、Javascript ファイルに記載するのが良いと思っています。

test.blade.php

<script>
  //LaravelのBladeで使っている変数$postsをJavascriptの変数で定義する
  const posts = @json($posts);
</script>
  //以降の処理は別ファイルに
<script src="{{ mix('js/test.js') }}"></script>

まとめ

以上です。

様々な書き方がありますが、この書き方がどんなパターンにでも対応しているのではないかなと思っています。

変数を定義さえできれば、あとは Javascript の領域だと思うので、Javascript 関係で検索してもらえれば良いのかなと思います。

関連記事

Laravel の blade から Vue コンポーネントに配列のデータを渡す方法