Javascript 如何返回Vue.js（Laravel6）中数据中的数据

我有一个计数器1的数据，计数器1有一个出纳1的数据，如下图所示：

这是我的vue脚本

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

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



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

    })
</script>

const app=新的Vue({
el:“#应用程序”，
数据：{
计数器1:{}，
},
安装的（）{
这是getQueue（）；
},
方法：{
getQueue（）{
get（'api/display/showqueue'）
。然后（（响应）=>{
this.counter1=response.data
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
})

我想我的出纳数据显示到这个，但我什么也得不到。我想这是因为出纳数据在柜台数据下面。我怎样才能调出那些数据

<div class="col-sm-6">
                    <div id="app" class="card bg-gradient-lighter mt-3 shadow">
                        <div class="card-header-lg">
                        <h3 class="text-default text-uppercase">@{{counter1.department}}</h3>
                        </div>
                        <div class="card-body-sm">
                        <h1 class="display-1 font-weight-bold"><strong>@{{counter1.letter}}-@{{counter1.number}}</strong></h1>
                        </div>
                        <div class="card-footer-sm">
                          <p class="text-warning font-weight-bold">COUNTER 1</p>
                        </div>
                    </div>
                  </div>

@{{柜台1.部门}
@{{counter1.letter}-{{counter1.number}
计数器1

更改元素，如：

<h3 class="text-default text-uppercase">@{{ counter1.cashier1.department }}</h3>

@{{counter1.cashier1.department}

不过，为了安全起见，我会使用下面的命令，以便在counter1.cashier1不存在时不会抛出错误：

<h3 class="text-default text-uppercase">@{{ (counter1.cashier1 || {}).department}</h3>

@{{（counter1.cashier1 | |{}）.department}

或者，您可以使用计算属性：

<h3 class="text-default text-uppercase">@{{ department }}</h3>



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

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



                })
                .catch(function (error){
                    console.log(error);
                });
            }
        },
        computed: {
            department: function() {
                return (counter1.cashier1 || {}).department;
            }
        }

    })
</script>

@{{department}
const app=新的Vue({
el:“#应用程序”，
数据：{
计数器1:{}，
},
安装的（）{
这是getQueue（）；
},
方法：{
getQueue（）{
get（'api/display/showqueue'）
。然后（（响应）=>{
this.counter1=response.data
})
.catch（函数（错误）{
console.log（错误）；
});
}
},
计算：{
部门：职能（）{
报税表（柜台1.出纳员1 |{}）；
}
}
})