laravel - Laravel blade.php は mix でコンパイルした JavaScript を app.js に使用

Question

Blade.php ファイルで JavaScript 関数を使用したいと考えています。非常に単純な関数で xyz.js ファイルを作成しました

function picture(soemthing){
    document.getElementById('idXYZ').src = "example.com";
}

次に、このファイルを webpack.mix.js 構成に追加しました。

mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

そして実行: npm run dev. これまでのところ、npm によってスクリプトがコンパイルされ、picture関数が app.js ファイルに含まれていました。今度は、blade.php にフォームを追加し、クリック時に画像関数を呼び出したいと思います。次のblade.phpファイルを作成しました：

@extends('layouts.app')
@section('content')
<div class="container">
    <form>
        Enter url: <input type="text" id="someID">
        <input type="button" onclick="picture($('#someID').val())" value="Click"/>
    </form>
</div>
<script src="{{ mix('js/app.js') }}"></script>
@endsection

そして、ここで私は本当に迷子になりました（ちなみに、私は常にバックエンドの担当者でした）。ページの再読み込み時のブラウザ表示

[Vue 警告]: テンプレートのコンパイル エラー: テンプレートは、状態を UI にマッピングすることのみを担当する必要があります。解析されないため、テンプレートに などの副作用のあるタグを配置しないでください。

そして、私が持っているボタンをクリックすると

エラー new:76 Uncaught ReferenceError: xyz が定義されていません

最初のエラーは、app.js ファイルが読み込まれていないことを示しており、それが画像が見つからない理由であることを理解しています。app.js または mix JavaScript ファイルによってコンパイルされたその他のファイルをどのように含める必要がありますか? 本当にこの問題の原因はタグですか?