Javascript 未知的自定义元素：<；v-app>；将vue与laravel一起使用时在根目录中

我正在尝试使用vue和vuetify与Laravel。我已经有一个vue组件在没有Vuetify的情况下运行良好。当我安装vuetify v1.5.1并尝试使用包括v-app在内的v-btn时，控制台中会出现此错误

我使用这些版本

“触控笔”：“^0.54.5”，

“手写笔加载程序”：“^3.0.2”，

“vue”：“^2.6.6”，

“vue模板编译器”：“^2.6.6”

app.js

require('./bootstrap');
import 'vuetify/dist/vuetify.min.css'
window.Vue = require('vue');
import Vuetify from 'vuetify'


Vue.component('example-component', 
require('./components/ExampleComponent.vue').default);

Vue.component('daily-delivery-planner', 
require('./components/DailyDeliveryPlanner.vue').default);

Vue.use(Vuetify);

const app = new Vue({
    el: '#app'
});`

DailyDeliveryPlanner.vue

`<template>
<div class="page-content browse container-fluid">
  <div class="row">
      <div class="col-md-12">
          <div class="panel panel-bordered">
              <div class="panel-body">
                <div class="col-md-9">
                  <div class="form-group row">
                      <label for="day" class="col-sm-1 col-form-label custom-label">Select A Day</label>
                      <div class="col-sm-9">
                        <v-btn color="success">Success</v-btn>
                      </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="">
                      <h4>Route Plan Code : <span class="label label-info" id="routeplanno">{{ routeplan_no }}</span></h4>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
</div>

</template>

<script>
    export default {

        data() {
           return {
             routeplan_no: "",
          };
       },

       methods: {
        getUserData: function() {
            axios.get('retreiveUserData')
                .then(({data}) => {
                    if(data.alert=='success'){
                        this.routeplan_no = data.data;
                    }else{
                        this.routeplan_no = Math.floor(1000 + Math.random() * 9000);
                    }
                });
        }
    },
    beforeMount() {
        this.getUserData();
    }
}
</script>`

`
选择一天
成功
路线图代码：{{routeplan_no}}
导出默认值{
数据（）{
返回{
路线图编号：“，
};
},
方法：{
getUserData:函数（）{
get（'retreiveUserData'）
。然后（{data}）=>{
如果（data.alert=='success'）{
this.routeplan_no=data.data；
}否则{
this.routeplan_no=Math.floor（1000+Math.random（）*9000）；
}
});
}
},
beforeMount（）{
这是getUserData（）；
}
}
`

功能和所有功能都可以工作，但唯一的问题是我不能使用vuetify组件

浏览.blade.php

@extends('voyager::master')

@section('content')
<v-app id="app">
    <daily-delivery-planner></daily-delivery-planner>
</v-app>

@endsection`

@extends（'voyager:：master'）
@节（“内容”）
@端部`

---

为什么会这样？任何帮助都将不胜感激

v-app

的id为

app

，由

New Vue（）

初始化，然后您也将其作为组件初始化，因此它由Vue初始化两次。此外，该错误还表明您的Vue版本过低

v-app

的id为

app

，由

New Vue（）

初始化，然后您也将其作为组件初始化，因此它由Vue初始化两次。此外，该错误还表明您的Vue版本过低