title: Django-Vue error "Failed to mount app: mount target selector returned null."
body: <p>Thanks for looking into my problem, I am a beginner with Django and Vue your assistance with this wil be extremely helpful. I am working on a Job portal and created the job search functionality in Django as backend for the same I have an app called <strong>job</strong> into my Django project. The browser Js console gives this error <code>Failed to mount app: mount target selector returned null.</code> For this app I have an add job view, through which an employer adds the jobs. For this I'm using Vue for validation and showing any errors if any non-null fields are not entered by the employer account. So this is not how it was supposed to look,<a href="https://github.com/pawan-nirpal-031/Python_Projects/blob/master/fault2.jpg" rel="nofollow noreferrer">Unexpected results snap shot</a> so as you can see it wasn't supposed to give me <code>[[error]]</code> and <code>company_size</code> instead <code>The company size is missing</code> as per the Vue AddJobApp, given below. Also if were to add <strong>#</strong> within mount-function-createapp within Vue-AddJobApp, the page entirely disappears (blank page). what am I doing wrong here?</p>
  <pre><code>adding # in AddJob.mount() function is making the page go blank a
  </code></pre>
  <p>Add job template</p>
  <pre><code>{% extends 'core/base.html' %}
  
  
  {% block content %}
  
          &lt;div id=&quot;add-job-app&quot;&gt;
  
              &lt;h1 class=&quot;title&quot;&gt; Add Job&lt;/h1&gt;
              &lt;form action=&quot;.&quot; method=&quot;POST&quot; v-on:submit=&quot;validateForm&quot;&gt;
                  {% csrf_token %}
  
                  {% if form.errors %}
                      {% for error in form.errors %}
                          &lt;div class=&quot;notification is-danger&quot;&gt;
                              {{ error }}
                          &lt;/div&gt;
                      {% endfor %}
                  {% endif %}
                      
                  &lt;div class=&quot;notification is-danger&quot; v-if =&quot;error.length&quot; &gt;
                      &lt;p v-for=&quot;error in errors&quot; &gt;
                          [[ error ]]
                      &lt;/p&gt;
                  &lt;/div&gt;
                          
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Title&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;title&quot; id=&quot;id_title&quot; v-model= &quot;title&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Short description&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;textarea name=&quot;short_description&quot; id=&quot;id_short_description&quot; class=&quot;textarea&quot; v-model= &quot;short_description&quot; &gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Long description&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;textarea name=&quot;long_description&quot; id=&quot;id_long_description&quot; class=&quot;textarea&quot; v-model= &quot;long_description&quot; &gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company name&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;company_name&quot; id=&quot;id_company_name&quot;  v-model= &quot;company_name&quot;  &gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company address&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;company_address&quot; id=&quot;id_company_address&quot; v-model= &quot;company_address&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company zipcode&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;company_zipcode&quot; id=&quot;id_company_zipcode&quot; v-model= &quot;company_zipcode&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company place&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;company_place&quot; id=&quot;id_company_place&quot; v-model= &quot;company_place&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company Country&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;input class=&quot;input&quot; type=&quot;text&quot; name=&quot;company_country&quot; id=&quot;id_company_country&quot; v-model= &quot;company_country&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;Company Size&lt;/label&gt;
                      
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;div class=&quot;select&quot;&gt;
                              &lt;select name=&quot;company_size&quot;  v-model = &quot;company_size&quot;&gt;
                                  &lt;option value=&quot;&quot;&gt;Choose Size&lt;/option&gt;
                                  &lt;option value=&quot;size_1_9&quot;&gt;1-9&lt;/option&gt;
                                  &lt;option value=&quot;size_10_49&quot;&gt;10-49&lt;/option&gt;
                                  &lt;option value=&quot;size_50_99&quot;&gt;50-99&lt;/option&gt;
                                  &lt;option value=&quot;size_100&quot;&gt;100+&lt;/option&gt;
                              &lt;/select&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
  
                  &lt;div class=&quot;field&quot;&gt;
                      &lt;div class=&quot;control&quot;&gt;
                          &lt;button class=&quot;button is-success&quot;&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  {% endblock %}
  
  {% block scripts %}
          &lt;script &gt;
              const AddJobApp = {
                  data() {
                      return {
                          title:'',
                          company_name:'',
                          short_description:'',
                          company_size:'',
                          errors:[]
                      }
                  },
                  delimiters:['[[',']]'],
                  methods :{
                      validateForm(e){
                          this.errors = []
  
                          if( this.title ===''){
                              this.errors.push('The title field is missing')
                          }
                          
                          if( this.short_description   ===''){
                              this.errors.push('The short description field is missing')
                          }
                          
                          if( this.company_name  ===''){
                              this.errors.push('The company name field is missing')
                          }
                          
                          if( this.company_size  ===''){
                              this.errors.push('The company size is missing')
                          }
  
                          if(this.errors.length){
                             e.preventDefault()
                             return false
                          }else{
                              return true
                          }
                      }
                  }
              }
              Vue.createApp(AddJobApp).mount('add-job-app');
          &lt;/script&gt;
  {% endblock %}
  
  </code></pre>
  <p>my views.py file inside of <strong>job</strong> app</p>
  <pre><code>from apps.job.forms import AddJobForm, ApplicationForm
  from django.shortcuts import redirect, render
  from .models import Job
  from django.contrib.auth.decorators import login_required
  from apps.notification.utilities import create_notification
  
  def job_detail(request,job_id):
      job = Job.objects.get(pk=job_id)
      return render(request, 'job/job_detail.html',{'job':job})
  
  def search(request):
      return render(request,'job/search.html')
  
  @login_required
  def apply_for_job(request,job_id):
      job = Job.objects.get(pk=job_id)
  
      if request.method=='POST':
          form = ApplicationForm(request.POST)
  
          if form.is_valid():
              application = form.save(commit=False)
              application.job = job
              application.created_by = request.user
              application.save()
              create_notification(request, job.created_by  ,'application',extra_id=application.id)
              return redirect('dashboard')
      else:
          form = ApplicationForm()
  
      return render(request,'job/apply_for_job.html',{'form':form,'job':job})
  
  
  
  @login_required
  def add_job(request):
      if request.method=='POST':
          form = AddJobForm(request.POST)
  
          if form.is_valid():
              job = form.save(commit=False)
              job.created_by  = request.user
              job.save()
              return redirect('dashboard')
      else:
          form = AddJobForm()
  
      return render(request,'job/add_job.html',{'form':form})
  </code></pre>