title: i try to mount a component in a component vue
body: <p>i i try to mount a component in a component, this component its a partial, in especifict its a paginator, which i need to integrate, i use props in the paginate component.
  but i have a problem, in the console appears the next messagge "Failed to mount component: template or render function not defined." i am  new in vue js, i using router-view i don´t know if this 
  it is affecting en the problem the code its the next :</p>
  
  <p>Pedido.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="pedido" style="margin-top:50px"&gt;
      &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;h4 class="card-title"&gt;Pedidos&lt;/h4&gt;
              &lt;div class="card-tools" style="position: absolute;right: 1rem;top: .5rem;"&gt;
                &lt;button type="button" class="btn btn-info" &gt;
                  Nuevo
                  &lt;i class="fas fa-plus"&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type="button" class="btn btn-primary" &gt;
                  Recargar
                  &lt;i class="fas fa-sync"&gt;&lt;/i&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="card-body"&gt;
              &lt;div class="mb-3"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-2"&gt;
                    &lt;strong&gt;Buscar por :&lt;/strong&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3"&gt;
                    &lt;select  class="form-control" id="fileds"&gt;
                      &lt;option value="total"&gt;Codigo&lt;/option&gt;
                      &lt;option value="name"&gt;Nombre&lt;/option&gt;
                      &lt;option value="email"&gt;Apellido&lt;/option&gt;
                      &lt;option value="phone"&gt;Telefono&lt;/option&gt;
                      &lt;option value="address"&gt;Direccion&lt;/option&gt;
                       &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-7"&gt;
                    &lt;input  type="text" class="form-control" placeholder="Buscar"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="table-responsive"&gt;
                &lt;table class="table table-hover table-bordered table-striped"&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th scope="col"&gt;Codigo&lt;/th&gt;
                      &lt;th scope="col"&gt;Nombre&lt;/th&gt;
                      &lt;th scope="col"&gt;Apellido&lt;/th&gt;
                      &lt;th scope="col"&gt;Telefono&lt;/th&gt;
                      &lt;th scope="col"&gt;Rut&lt;/th&gt;
                      &lt;th scope="col" class="text-center"&gt;Action&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;tr v-for="(pedido, index) in pedidos" :key="pedido.codigo"&gt;
                      &lt;th scope="row"&gt;{{ index + 1}}&lt;/th&gt;
                      &lt;td&gt;{{ pedido.nombre_cliente}}&lt;/td&gt;
                      &lt;td&gt;{{ pedido.apellido_cliente }}&lt;/td&gt;
                      &lt;td&gt;{{ pedido.telefono_cliente}}&lt;/td&gt;
                      &lt;td&gt;{{ pedido.rut_cliente }}&lt;/td&gt;
                      &lt;td class="text-center"&gt;
                        &lt;button type="button"  class="btn btn-info btn-sm"&gt;
                          &lt;i class="fas fa-eye"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                        &lt;button type="button"  class="btn btn-primary btn-sm"&gt;
                          &lt;i class="fas fa-edit"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                        &lt;button
                          type="button"
                          
                          class="btn btn-danger btn-sm"
                        &gt;
                          &lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr &gt;
                      &lt;td colspan="6"&gt;
                        &lt;div class="alert alert-danger" role="alert"&gt;No se ah encontrado resultados  :(&lt;/div&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div class="card-footer"&gt;
                  &lt;pagination
                  v-if="pagination.last_page &gt; 1"
                  :pagination="pagination"
                  :offset="5"
                  @paginate="getData()"
                &gt;&lt;/pagination&gt;
                 
                &lt;/div&gt;
        
              &lt;/div&gt;
  
            
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     
      
     
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
        
        data(){
          
          return{
  
            pedidos:[],
  
            pagination: {
              current_page: 1,
             
            },
  
          }    
        },
          mounted() {
              console.log('Component mounted.')
              this.getData();
              
          },
          methods:{
            getData(){
              this.$Progress.start();
            axios.get("api/pedidos?page=" + this.pagination.current_page)
            .then(response =&gt;{
              this.pedidos = response.data.data;
            this.pagination = response.data.meta;
              this.$Progress.finish();
            })
            .catch(e =&gt;{
              console.log(e)
              this.$Progress.fail();
            })
            //.then(({ data }) =&gt; (this.pedidos = data));
            }
          },
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this its PaginationComponent.vue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;nav aria-label="..."&gt;
          &lt;ul class="pagination justify-content-center"&gt;
              &lt;li class="page-item" :class="{ disabled: pagination.current_page &lt;= 1 }"&gt;
                  &lt;a class="page-link" @click.prevent="changePage(1)"  &gt;First page&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="page-item" :class="{ disabled: pagination.current_page &lt;= 1 }"&gt;
                  &lt;a class="page-link" @click.prevent="changePage(pagination.current_page - 1)"&gt;Previous&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="page-item" v-for="page in pages"  :key="page" :class="isCurrentPage(page) ? 'active' : ''"&gt;
                  &lt;a class="page-link" @click.prevent="changePage(page)"&gt;{{ page }}
                      &lt;span v-if="isCurrentPage(page)" class="sr-only"&gt;(current)&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="page-item" :class="{ disabled: pagination.current_page &gt;= pagination.last_page }"&gt;
                  &lt;a class="page-link" @click.prevent="changePage(pagination.current_page + 1)"&gt;Next&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="page-item" :class="{ disabled: pagination.current_page &gt;= pagination.last_page }"&gt;
                  &lt;a class="page-link" @click.prevent="changePage(pagination.last_page)"&gt;Last page&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props:['pagination', 'offset'],
          methods: {
              isCurrentPage(page){
                  return this.pagination.current_page === page
              },
              changePage(page) { 
                  if (page &gt; this.pagination.last_page) {
                      page = this.pagination.last_page;
                  }
                  this.pagination.current_page = page;
                  this.$emit('paginate');
              }
          },
          computed: {
              pages() {
                  let pages = []
  
                  let from = this.pagination.current_page - Math.floor(this.offset / 2)
  
                  if (from &lt; 1) {
                      from = 1
                  }
  
                  let to = from + this.offset -1
  
                  if (to &gt; this.pagination.last_page) {
                      to = this.pagination.last_page
                  }
  
                  while (from &lt;= to) {
                      pages.push(from)
                      from++
                  }
  
                  return pages
              }
          }
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Vue.component('pagination', require('./components/partial/PaginationComponent.vue'));
  
  const app = new Vue({
      el: '#app',
      router
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/ogCGT.png" rel="nofollow noreferrer">this its the error</a></p>
  
  <p>but in the extension of vue in the console i see the
  properties of the object, this is fine, 
  but I do not know what I'm doing wrong, like I said I'm new to this. </p>
  
  <p><a href="https://i.stack.imgur.com/j1lUm.png" rel="nofollow noreferrer">extension of vue</a></p>
  
  <p>I hope they understand me, 
  I would greatly appreciate your help.</p>