Данные реквизита становятся неопределенными после передачи данных от laravel-blade к vue-компоненту

Question

Мне очень жаль, но я все еще новичок в vue.js и надеюсь, что кто-нибудь сможет мне помочь. Я пытаюсь передать данные из laravel-blade в vuejs-файл. Но данные ничего не отобразят, и когда я попытался получить значение из отладчика, он получил только неопределенное значение. Я также попробовал смонтированную функцию для проверки данных, но все же она не определена.

это блейд-файл

<main id="app-main">
    <center-details :data-type="{{ $data['type'] }}"></center-details>
</main>

файл app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
window.Vue = require('vue');

const centerDetail = require('./components/center/detail.vue');

require('./mixin');

const routes = {
    '/center/detail': centerDetail,
}

/**
 * Element UI
 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-sales/index.css';
import locale from 'element-ui/lib/locale/lang/ja';
window.Vue.use(ElementUI, {locale});

/**
 * Datatables
 */
import VueDataTables from 'vue-data-tables';
window.Vue.use(VueDataTables);

var app = new Vue({
    el: '#app-main',
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
            return routes[this.currentRoute] || NotFound
        }
    },
    render (h) { return h(this.ViewComponent) }
});

файл компонента vue

<template>
  <div>{{ dataType}}</div>
</template>

<script>
  export default {
    props: ['dataType'],
    mounted() {
      console.log(this.dataType);
    },
  }
</script>