【Laravel7】Vue.jsで文字数をリアルタイムにカウントする方法。エラーは出ないけど数値が変わらないときの対処法

正常に動くコードは以下

stst5821/sangyo

元のコードは↓

https://codepen.io/takapen/pen/arvdxX

確認するファイル一覧

・webpack.mix.js
jsのディレクトリを指定する。

・resources/js/app.js
ここにスクリプトを書く。

・public/js/app.js
上記のresourcesに書いて、npm run devをターミナルで実行すると、public/jsディレクトリに同名のjsファイルができる。

・views/post/create

<div id="app1">
   <p>
       <input v-model="myText" id="body1" name="body1"
           class="form-control {{ $errors->has('body1') ? 'is-invalid' : '' }}" rows="4"
           value="{{ old('body1') }}" type="text">
   </p>
   // @{{ remaining }}と、@をつけないとエラーが起きる。
   // bladeとvue.jsの書き方がかぶってしまっていることが原因らしい。
   <p v-bind:style="{color: computedColor}">残り@{{ remaining }}文字</p>
</div>

・views/layouts/app.blade.php

</body>の直上にvue.jsのCDNとapp.jsへのリンクをはっている。

<!-- vue.jsのCDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="{{ mix('/js/app.js') }}"></script>

やりたいこと

フォームに入力されている文字数をリアルタイムでカウントしたい。

問題

文字数は表示されるが、カウントがされない。

解決方法

app.blade.php

{{ asset('/js/app.js') }}にしていたところを

<script src="{{ mix('/js/app.js') }}"></script>

にしたら、動いた。

mixを使っているのに、assetを使ったからダメだったのかな。

よくわからない。

切り分けのために試したこと

index.html上では動く

vueで正常に動作することを確認
javascriptのコードでも普通に動く。
MAMPのせいではない
コードが間違っているわけではない。

Laravelのせいで動いていない。

Laravelでvueやjavascriptを動かすのになにかコツが必要っぽい。

textを表示させるコードなら動くから設置する場所などは間違ってないのではないか。