vue.js not rendering a component

Question

This is my html:

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

This is my scripts in the html:

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

And this is my Vue js component:

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'],



});

The component is not rendering. When I open the chrome browser and use Ctrl + U to see the code, nothing is being done.

The Chrome console not return errors.

What am I doing wrong?

EDIT: the vue console report this

[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

In HTML, remove v-bind :

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

v-bind is used when you dynamically bind one or more attributes or a component prop to an expression or vue data. Here as you are passing a constant so it is not needed.