LaravelCollectiveのフォームでvue.jsを使って初期値を表示させたい時

laravelCollectiveでvue.jsを使うと、vue.jsが後から呼び出されるので、エラー時や戻る時にinputフォームの値がリセットされてしまう。

<div id="title">
　 {!! Form::text('title', null, ['class'=>'form-control', 'placeholder'=>'タイトルを20文字以内で入力してください', 'maxlength'=>'20', 'v-model.trim'=>'message', 'autocomplete'=>'off']) !!} 
 </div>
                        @error('title')
                                <br><span class="error">{{$message}}</span>
                        @enderror

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
            el: "#title",
            data: { message: ""}
        });
</script>

### {{old(‘title’)}}をvue.jsにセット
vue.jsにセットすれば、エラー時や戻る時にinputフォームの値が表示される。

var titleValues = {!! json_encode(old('title', [])) !!};
        new Vue({
            el: "#title",
            data: { message: titleValues}
        });

Vue.jsの仕組みを理解していれば、直ぐにわかる事なのでしょうが、このトラブルシューティングに数時間かかりました。