I need to render one component inside another. But then running the subcomponent is not applying.

Everything is global:

Index

<script src=" <?= Helpers::asset('assets/js/vue/componenteA.js'); ?>"></script>
<script src=" <?= Helpers::asset('assets/js/vue/componenteB.js'); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

App.js

var app = new Vue({
  el: '#app-welcome',
  components: {
    'componenteA': componenteA,
    'componenteb' : componenteb
  }...

componenteA

const componenteA = {
  template: "<div><p>xxx</p> 
                        <div  v-for="d in DEMO">
                          <componenteB :x="d"></componenteB>
                        </div>   ......</div>",
  props: {
    x: { type: Object }
  } 
data(){}

When I run the code, everything inside componentA is rendered to the screen, however, the content of componentB is not displayed.

If I order componentB to be displayed outside of componentA, it is shown successfully.

My question is how to make componentB rendering happen inside componentA.

Informs that the server does not have NODE, NPM, VUECLI.

thanks.