value not displaying and having errors in console for Vue.js (laravel6)

I'm having an error for displaying a data from vue.js This is the error.

this is the vue.js result

I have a data in counter1 and the rest has no value yet. But I want it to display blank if it has no value yet and display the data that has value already.

Here is my vue.js script:

<script>
    const app = new Vue({
        el:'#app',
        data:{
            queue:{},

        },
        mounted(){
            this.getQueue();
        },
        methods:{
            getQueue(){
                axios.get('api/display/showqueue')
                .then((response)=>{
                    this.queue=response.data
                })

                .catch(function (error){
                    console.log(error);
                });
            }
        }

    })
</script>

And here is my HTML for vue.js data output:

<div id="app" class="row">

                  <div  class="col-sm-6">
                    <div  class="card bg-gradient-lighter mt-3 shadow">
                        <div class="card-header-lg">
                        <h3 class="text-default text-uppercase" v-if="queue.cashier1.department">@{{ (queue.cashier1 || {}).department}}</h3>
                        <h3 class="text-default text-uppercase"  v-else>-</h3>
                        </div>
                        <div class="card-body-sm">
                        <h1 class="display-1 font-weight-bold"  v-if="queue.cashier1"><strong>@{{ (queue.cashier1 || {}).letter}}-@{{ (queue.cashier1 || {}).number}}</strong></h1>
                        </div>
                        <div class="card-footer-sm">
                          <p class="text-warning font-weight-bold">COUNTER 1</p>
                        </div>
                    </div>
                  </div>
                  <div  class="col-sm-6">
                    <div class="card bg-gradient-lighter shadow mt-3">
                        <div class="card-header-lg">
                            <h3 class="text-default text-uppercase"  v-if="queue.cashier2.department">@{{ (queue.cashier2 || {}).department}}</h3>
                            <h3 class="text-default text-uppercase"  v-else>-</h3>
                        </div>
                        <div class="card-body-sm">
                            <h1 class="display-1 font-weight-bold"  v-if="queue.cashier2"><strong>@{{ (queue.cashier2 || {}).letter}}-@{{ (queue.cashier2 || {}).number}}</strong></h1>
                        </div>
                        <div class="card-footer-sm">
                            <p class="text-warning font-weight-bold">COUNTER 2</p>
                        </div>
                    </div>
                  </div>


                        <div class="col-sm-6">
                            <div class="card bg-gradient-lighter shadow mt-3">
                                <div class="card-header-lg">
                                    <h3 class="text-default text-uppercase"  v-if="queue.accounting1.department">@{{ (queue.accounting1 || {}).department}}</h3>
                                    <h3 class="text-default text-uppercase"  v-else>-</h3>
                                </div>
                                <div class="card-body-sm">
                                    <h1 class="display-1 font-weight-bold"  v-if="queue.accounting1"><strong>@{{ (queue.accounting1 || {}).letter}}-@{{ (queue.accounting1 || {}).number}}</strong></h1>
                                </div>
                                <div class="card-footer-sm">
                                    <p class="text-warning font-weight-bold">COUNTER 1</p>
                                </div>
                            </div>
                        </div>


                  <div class="col-sm-6">
                    <div class="card bg-gradient-lighter mt-3 shadow">
                        <div class="card-header-lg">
                        <h3 class="text-default text-uppercase" v-if="queue.accounting2.department">@{{ (queue.accounting2 || {}).department}}</h3>
                        <h3 class="text-default text-uppercase"  v-else>-</h3>
                        </div>
                        <div class="card-body-sm">
                            <h1 class="display-1 font-weight-bold" v-if="queue.accounting2"><strong>@{{ (queue.accounting2 || {}).letter}}-@{{ (queue.accounting2 || {}).number}}</strong></h1>
                        </div>
                        <div class="card-footer-sm">
                          <p class="text-warning font-weight-bold">COUNTER 2</p>
                        </div>
                    </div>
                  </div>


                    <div class="col-sm-6">
                        <div class="card bg-gradient-lighter shadow mt-3">
                            <div class="card-header-lg">
                                <h3 class="text-default text-uppercase" v-if="queue.registrar1.department">@{{ (queue.registrar1 || {}).department}}</h3>
                                <h3 class="text-default text-uppercase"  v-else>-</h3>
                            </div>
                            <div class="card-body-sm">
                                <h1 class="display-1 font-weight-bold" v-if="queue.registrar1"><strong>@{{ (queue.registrar1 || {}).letter}}-@{{ (queue.registrar1 || {}).number}}</strong></h1>
                            </div>
                            <div class="card-footer-sm">
                                <p class="text-warning font-weight-bold">COUNTER 1</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="card bg-gradient-lighter mt-3">
                            <div class="card-header-lg">
                                <h3 class="text-default text-uppercase" v-if="queue.registrar2.department">@{{ (queue.registrar2 || {}).department}}</h3>
                                <h3 class="text-default text-uppercase"  v-else>-</h3>
                            </div>
                            <div class="card-body-sm">
                                <h1 class="display-1 font-weight-bold" v-if="queue.registrar2"><strong>@{{ (queue.registrar2 || {}).letter}}-@{{ (queue.registrar2 || {}).number}}</strong></h1>
                            </div>
                            <div class="card-footer-sm">
                                <p class="text-warning font-weight-bold">COUNTER 2</p>
                            </div>
                        </div>
                    </div>

                  </div>

How can I make it that whenever I have a data available, It will display on the page but if I have no data. It will just leave it blank and have no errors.