title: I can't connect vue to my Laravel blade view
body: <p>I am trying to connect my app vue with Laravel, I was able to achieve it with the "users" route but when trying to connect the second part, I can't do it, it just doesn't allow me to connect, I don't know if I'm doing things wrong, I'm new using vue.</p>
  
  <p>When I connect #crudUsuarios everything works but when I connect #crudLessons data is not shown.
  I tried the routes and they actually work, they return the data I want, however when connected it shows nothing.</p>
  
  <p>I also get an error in the view that is not where it shows "#crudUsarios"
  Error: app.js: 2626 [Vue warn]: Cannot find element: #crudUsuarios</p>
  
  <p>app.js</p>
  
  <pre><code>// require('./bootstrap');
  
  window.Vue = require('vue');
  
  window.moment = require('moment');
  
  window.axios = require('axios');
  
  
  // import toastr from 'toastr'
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  const app = new Vue({
      el: '#crudUsuarios',
  
      created: function()
      {
          this.getUsers();
      },
  
      data: {
          time: moment().format('Y-M-d H:mm:ss'),
          users: [],
          newName: '', newfLastName : '', newsLastName : '', newAge : '', newEmail: '', newCellphone : '', newPassword: '',
          fillUser: {'id' : '', 'slug': '', 'name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''},
          getUser: {'id' : '', 'slug': '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''},
          errors: []
      },
  
      methods: {
          getUsers: function()
          {
              //Aqui es donde conecta a la ruta para jalar los datos
              var urlUsers = 'users';
              axios.get(urlUsers).then(response =&gt;{
                  this.users = response.data
              });
          },
  
          editUser: function(user){
              this.fillUser.id = user.id;
              this.fillUser.name = user.name;
              this.fillUser.fLastName = user.fLastName;
              this.fillUser.sLastName = user.sLastName;
              this.fillUser.age = user.age;
              this.fillUser.email = user.email;
              this.fillUser.cellphone = user.cellphone;
              this.fillUser.password = user.password;
              $('#edit').modal('show');
          },
  
          updateUser: function(id){
              // alert('Nada man');
              var url = 'users/' + id;
              axios.put(url, this.fillUser).then(response =&gt; {
                  this.getUsers();
                  this.fillUser = {'id' : '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''};
                  this.errors = [];
                  $('#edit').modal('hide');
                  toastr.success('Usuario actualizado con éxito');
              }).catch(error =&gt; {
                  this.errors = error.response.data
              });
          },
  
          deleteUser: function(user)
          {
              var url = 'users/' + user.id;
  
              if (confirm("¿Eliminar usuario?") == true) {
                  axios.delete(url).then(response =&gt; {
                      this.getUsers();
                      toastr.success('Usuario eliminado con éxito');
                  });
              } else {
                  this.getUsers();
              }
  
  
          },
  
          createUser: function()
          {
              var url = 'users';
              axios.post(url, {
                  name: this.newName,
                  fLastName: this.newfLastName,
                  sLastName: this.newsLastName,
                  age: this.newAge,
                  email: this.newEmail,
                  cellphone: this.newCellphone,
                  password: this.newPassword
              }).then(response =&gt; {
                  this.getUsers();
                  //Vaciar los campos de creacón una vez creado el usuario.
                  this.newName= '', this.newfLastName= '', this.newsLastName = '', this.newAge = '', this.newEmail= '', this.newCellphone = '', this.newPassword= '',
                  this.errors = [];
                  $('#create').modal('hide');
                  toastr.success('Nuevo usuario creado con éxito');
  
                  // Código para que no se quede activo el MODAL
                  if ($('.modal-backdrop').is(':visible')) {
                      $('body').removeClass('modal-open');
                      $('.modal-backdrop').remove();
                  };
  
              }).catch(error =&gt; {
                  this.errors = error.response.data
              });
          },
  
          showUser: function (user) {
  
              var url = 'users/'+user.id;
              axios.get(url).then(response =&gt;{
  
                  // alert('nada de nada');
                  this.getUser.id = user.id;
                  this.getUser.slug = user.slug;
                  this.getUser.name = user.name;
                  this.getUser.fLastName = user.fLastName;
                  this.getUser.sLastName = user.sLastName;
                  this.getUser.age = user.age;
                  this.getUser.email = user.email;
                  this.getUser.cellphone = user.cellphone;
                  this.getUser.password = user.password;
                  this.getUser.created_at = user.created_at;
                  $('#show').modal('show');
              });
          }
  
      }
  });
  
  // /var urlUsers = 'https://randomuser.me/api/?results=10';
  const app = new Vue({
      el: '#crudLessons',
  
      created: function()
      {
          this.getLessons();
      },
  
      data: {
          lessons: [],
          // newName: '', newfLastName : '', newsLastName : '', newAge : '', newEmail: '', newCellphone : '', newPassword: '',
          // fillUser: {'id' : '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '','password' : ''},
          getLesson: {'id' : '','fecha' : '','inicio' : '','final' : '', 'user_name' : '', 'user_fLastName' : '', 'user_sLastName' : '', 'user_email' : '', 'user_cellphone' : '', 'created_at' : ''},
          errors: []
      },
      methods: {
          getLessons: function()
          {
              //Aqui es donde conecta a la ruta para jalar los datos
              var urlLessons = 'lessons';
              axios.get(urlLessons).then(response =&gt;{
                  this.lessons = response.data
              });
          },
  
      }
  });
  
  </code></pre>
  
  <p>index.blade.php</p>
  
  <pre><code>
  @extends('layouts.material')
  
  @section('content')
  
  &lt;div class="col-lg-12" id="crudLessons"&gt;
  
      &lt;div class="card"&gt;
  
         &lt;h4&gt; @{{ $data }} &lt;/h4&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  @endsection
  
  </code></pre>
  
  <p>LessonsController.php</p>
  
  <pre><code>
  public function index()
      {
  //        $products = Lesson::orderBy('id', 'DESC')-&gt;get();
          $products = Lesson::with('user')-&gt;OrderBy('id', 'DESC')-&gt;get();
  
          return $products;
      }
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/K1UqA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K1UqA.png" alt="enter image description here"></a></p>