I have created a component inside my index.js (where my main Vue code is). Now I would like to modularize the project and put the component into a separate file. I don't know how to do that because if I create e.g. optionalapm.js the main index.js returns an error that it can't locate the vue component optionalapm which I included.

How can I import the component into the index.js?

Here's my code of the component:

var optionalapm=Vue.component('optionalapm', {

props:['value'],

template:   `<div class=col-l-12 col-m-12 col-s-12 col-xs-emphased style=background-color: #f9f9f9>

                <p class=hidden-xl hidden-l hidden-m></p>

                <p class=hidden-xl hidden-l hidden-m></p> 

                <h3 style=text-align: center>APM</h3>

                <p>&nbsp;</p>

                <div class=col-l-4>

                    <p style=text-align: center>Number of nodes</p>

                    <div class=form-input-set>

                        <select v-bind:value='value' v-on:input=$emit('input', $event.target.value) v-on:change=$emit('calcapmprice') class=form-select style=background: white>

                            <option value=apmnodes0>

                                <p style=text-align: center>0</p>

                            </option>                                            

                            <option value=apmnodes1>

                                <p style=text-align: center>1</p>

                            </option>

                            <option value=apmnodes2>

                                <p style=text-align: center>2</p>

                            </option>

                            <option value=apmnodes3>

                                <p style=text-align: center>3</p>

                            </option>  

                        </select>

                    </div> 

                </div>

              </div>`,       

})                               

And that's the relevant code in the index.js:

var ececontent = new Vue({

    el:'#ece-content',

    data: {

        ...

    },

    methods: {

        ...

    },

    components: {

        optionalapm: optionalapm,

    }



});