как вызвать компонент диалога vuetify в файле blade.php

Question

Я использую Vue с Laravel.Я создал файл NewDispenser.vue с компонентом диалога vuetify и добавил необходимые мне функции в этот файл vue.Теперь у меня есть файл browse.blade.php в папке laravel views, и я хочу открыть этот компонент диалога, который я создал в NewDispenser.vue, когда пользователь нажимает кнопку в этом файле browse.blade.php.Я уже экспортировал созданный компонент в app.js файл.Как я могу этого достичь?Я уже попробовал пример, но я запутался в этом.Буду признателен за любую помощь ..

NewDispenser.vue файл

<template>
<v-app>
    <v-container>
        <v-layout row wrap>
             <v-dialog v-model="showModal" max-width="500px">
                <v-card>
                    <v-card-title>
                        <span class="headline">Add New Dispenser</span>
                    </v-card-title>

                    <v-card-text>
                    <v-container grid-list-md>
                        <v-layout wrap>
                        <v-flex xs12 sm6 md4>
                            <v-combobox
                                v-model="dispenser_data.dispenser_type"
                                :items="dispenser_types"
                                chips
                                label="Dispenser Type"
                            >
                                <template v-slot:selection="data">
                                <v-chip
                                    :key="JSON.stringify(data.item)"
                                    :selected="data.selected"
                                    :disabled="data.disabled"
                                    class="v-chip--select-multi"
                                    @click.stop="data.parent.selectedIndex = data.index"
                                    @input="data.parent.selectItem(data.item)"
                                >
                                    <v-avatar class="accent white--text">
                                    {{ data.item.slice(0, 1).toUpperCase() }}
                                    </v-avatar>
                                    {{ data.item }}
                                </v-chip>
                                </template>
                            </v-combobox>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                            <v-text-field v-model="dispenser_data.dispenser_serial" label="Dispenser Serial"></v-text-field>
                        </v-flex>
                        </v-layout>
                    </v-container>
                    </v-card-text>

                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
                    <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
                    </v-card-actions>
                </v-card>
                </v-dialog>
        </v-layout>
    </v-container>
</v-app>

<script>
import { mapGetters } from "vuex";
import io from 'socket.io-client';
export default {
     data () {
         return{
            socket:io('127.0.0.1:3000'),
            showModal: false,
            dispenser_data:{
                dispenser_type:'Choose..',
                dispenser_serial:''
            },
            dispenser_types:[
                'Compressor',
                'Eco Bubbler',
                'Electronic'
            ]
         }
     },
     props: ['show'],
     computed: {
        ...mapGetters(["newDispenserData"])
     },
     methods:{
         close: function () {
            this.$emit('close');
         },
         save(){
             if(this.dispenser_data.dispenser_type == 'Compressor'){
                  this.newDispenserData.dispenser_serial = '[C]'+this.dispenser_data.dispenser_serial
             }else if(this.dispenser_data.dispenser_type == 'Eco Bubbler'){
                 this.newDispenserData.dispenser_serial = '[B]'+this.dispenser_data.dispenser_serial
             }else{
                 this.newDispenserData.dispenser_serial = '[E]'+this.dispenser_data.dispenser_serial
             }
            this.newDispenserData.dispenser_type = this.dispenser_data.dispenser_type
            this.$store.dispatch("SAVE_NEW_DISPENSER",this.newDispenserData);
         },
     }
}

browse.blade.php

кнопка

 <button type="button" class="btn btn-success" @click="showModal = true" name="button"><i class="fas fa-plus-circle"></i>&nbsp;Add New Dispenser</button>

компонент

<div id="app">
 <add-new-dispenser :show.sync="showModal"></add-new-dispenser>
</div>