Vue JS не делает компонент

Question

Это мой HTML:

<div id="modalComponent"> 
    <remodal-designs v-binds:designid="1074"></remodal-designs> 
</div> 

Это мои скрипты в HTML:

<script src="{{ FuImg::asset('js/libs/vue.min.js') }}"></script> 
<script src="{{ FuImg::asset('js/vue_components/remodal_designs.js') }}"></script> 

И это Vue расслоение плотной компонент мой:

Vue.component('remodal-designs', { 

    template : '<div id="modaldesigns" class="cp-remodal remodal" :data-remodal-id="designid">\ 
        <button data-remodal-action="close" class="remodal-close"></button>\ 
        <div class="container">\ 
         <div class="row no-gutter">\ 
          <div class="col-sm-6">\ 
           <div class="cp-tab-menu active">\ 
            Camisetas Premium\ 
           </div>\ 
          </div>\ 
          <div class="col-sm-6">\ 
           <div class="cp-tab-menu">\ 
            Camisetas Basic\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </div>\ 
       </div>\ 
    ', 

    props : ['designid'], 



}); 

Компонент не рендеринг. Когда я открываю браузер Chrome и использую Ctrl + U для просмотра кода, ничего не делается.

Консоль Chrome не возвращает ошибки.

Что я делаю неправильно?

EDIT: уведомите

[Vue warn]: failed to compile template: 

<div id="modalComponent"> 
    <remodal-designs v-bind:designid="5rpexo1zwci6"></remodal-designs> 
</div> 

- invalid expression: v-bind:designid="1074" 


(found in root instance) 

Answer 1

В HTML В вю консоли, удалите v-bind:

<div id="modalComponent"> 
    <remodal-designs designid="1074"></remodal-designs> 
</div> 

v-bind используется, когда вы динамически связать один или несколько атрибутов или компонента подпорку к выражению или vue. Здесь, когда вы проходите постоянную, поэтому она не нужна.