How to use seperate js files in Laravel Blade – Blancer.com Tutorials and projects

I’m trying to have different JS files for each Blade View in Laravel to help keep the project structure clean.

My problem is, when I try to access a function from that JS file in a Blade view, the console returns an error of:

Uncaught ReferenceError: myFunc is not defined at HTMLButtonElement.onclick

But the file is there and it logs the console message from that js file.

Here are my files and structure:

resources/js/index.js

console.log("Hello from index js");

function myFunc() {
    console.log("Hello");
}

resources/views/layout/master.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
       @yield('content')
       {{-- @yield('js') --}}
       @stack('js')
    </body>
</html>

resources/views/index.blade.php

@extends('layout.master')
@section('content')
    <h1>Works</h1>
    <button onclick="myFunc()">Click</button>
@endsection
@push('js')
<script src="{{ asset('js/index.js')}}"></script>
@endpush

webpackmix.mix.js

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [
        //
    ]
);

mix.js("resources/js/index.js", "public/js");