TypeError: dateInput is null

index.blade.php

@section('content')

    <div class="container-fluid" id="app">
        <div class="row">
            <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
                <span class="me-2"><i class="far fa-calendar-check"></i></span>
                <span>@yield('title')</span>
            </div>
            <div class="row">
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label">تاریخ</label>
                    <div class="col-sm-6">
                        <date-picker type="date" @change="dateEvent" :value="date" format="jYYYY-jMM-jDD" v-model="date"></date-picker>
                    </div>
                </div>
            </div>
            <div id="showType">
                {{-- # --}}
            </div>
        </div>
    </div>

@endsection

@push('script')

    <script src="{{ asset('themes/vue/vue.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
    <script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
    <script src="{{ asset('themes/js/axios.min.js') }}"></script>
    <script>
        let product_id = "{{ $product->id }}";
        let warranty_id = "{{ $warranty->id }}";
        const app = new Vue({
            el: '#app',
            data: {
                dates: [],
                products: [],
                warranties: [],
                date: '',
                product_id: product_id,
                warranty_id: warranty_id,
            },
            watch: {
                date(newDate) {
                    axios.get('{{ route('products.warranties.types.create', [$product, $warranty]) }}', {
                        product_id: this.product_id,
                        warranty_id: this.warranty_id,
                    })
                        .then(response => {
                            const showType = document.getElementById('showType');
                            const inputDate = document.getElementById('inputDate');
                            showType.innerHTML = response.data;
                            inputDate.value = newDate;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            },
            components: {
                DatePicker: VuePersianDatetimePicker
            },
            methods:{
                dateEvent(event){
                    console.log(event);
                    console.log(this.date);
                    let dateInput = document.getElementById("date")
                    dateInput.value = this.date;
                }
            }
        });
    </script>

@endpush

crate.blade.php

<form action="{{ route('products.warranties.types.store', [$product, $warranty]) }}" method="post">
    @csrf
    <input type="text" name="date" id="date" value="">
    @foreach($colors as $color)
        <div class="mb-3 row">
            <label for="color{{ $color->id }}" class="col-sm-2 col-form-label">{{ $color->color_name }}</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="color{{ $color->id }}" name="color{{ $color->id }}">
            </div>
        </div>
    @endforeach
    @if (!count($colors) == 0)
        <div class="mb-3 row">
            <label for="no_color" class="col-sm-2 col-form-label">بدون رنگ</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="no_color" name="no_color">
            </div>
        </div>
    @endif
    <div class="row">
        <div class="col-md-6 mt-3">
            <button type="submit" class="btn btn-primary btn-lg">ذخیره</button>
        </div>
    </div>
</form>