title: Adding a new component instance in Vue via a button click returning error
body: <p>Just to preface this whole thing-- I'm not even sure that the way I'm going about this is the most correct way to do it. Basically, I need to add an instance of a Vue component when the user clicks a button, expanding. I used <a href="https://forum.vuejs.org/t/add-component-to-dom-programatically/7308/4" rel="nofollow noreferrer">this</a> discussion in the vue.js forum to help. Unfortunately, triggering this insert function via a button click is not working. Console is showing an "addNewStop is not defined at HTMLButtonElement.onclick" error. </p>
  
  <p>The HTML in my template: </p>
  
  <pre><code>&lt;div id="newCont"&gt;&lt;/div&gt;
              &lt;button type="button" class="btn-primary" id="addStop" onclick="addNewStop()"&gt;Add Stop&lt;/button&gt;
  </code></pre>
  
  <p>The script I'm calling:</p>
  
  <pre><code>  import Stops from '@/components/Stops'
  
    const ComponentCtor = Vue.extend(Stops)
    const componentInstance = new ComponentCtor({})
    function addNewStop() {
      componentInstance.$mount('#newCont')
    }
  </code></pre>
  
  <p>I will freely admit that I wasn't sure how to go about doing this in the first place, and have found surprisingly little information about how to insert new component instances. If there are other, better options I should be exploring beyond this, please let me know!</p>
  
  <p>Edit:</p>
  
  <p>Stops is actually a template containing form inputs, allowing the user to specify a delivery stop along a truck route. Here is its template:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="stops"&gt;
      &lt;h4&gt;Delivery&lt;/h4&gt;
              &lt;div class="form-group"&gt;
                    &lt;label for="shipName"&gt;Shipper Name&lt;/label&gt;
                  &lt;vue-simple-suggest
                      :list="simpleSuggestionList"
                      :filter-by-query="true" id="shipName" placeholder="Start typing a name" autocomplete="autofill-myself"&gt;&lt;/vue-simple-suggest&gt;
                  &lt;/div&gt;
              &lt;div class="form-group"&gt;
                    &lt;label for="locationPickup"&gt;Location&lt;/label&gt;
                  &lt;vue-simple-suggest
                      :list="simpleSuggestionList"
                      :filter-by-query="true" id="locationPickup" placeholder="Start typing an address" autocomplete="custom-addresses"&gt;&lt;/vue-simple-suggest&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                &lt;label&gt;Date&lt;/label&gt;
                &lt;flat-pickr
                :config="dateConfig"
                  class="form-control" 
                  placeholder="Select date"               
                  name="date" id="date1"&gt;&lt;/flat-pickr&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="form-group col left"&gt;
                &lt;label&gt;Time&lt;/label&gt;
                &lt;flat-pickr
                  :config="timeConfig"
                  class="form-control" 
                  placeholder="Select time"               
                  name="time1" id="time1"&gt;&lt;/flat-pickr&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group col right"&gt;
                &lt;label v-show="pickupChecked"&gt;Time 2&lt;/label&gt;
                &lt;flat-pickr
                  :config="timeConfig"
                  class="form-control" 
                  placeholder="Select time"               
                  name="time2" v-show="pickupChecked" id="time2"&gt;&lt;/flat-pickr&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-check"&gt;
                  &lt;input class="form-check-input" type="checkbox" v-model="pickupChecked" id="apptCheck1" &gt;
                  &lt;label class="form-check-label" for="apptCheck1"&gt;
                    Time range?
                  &lt;/label&gt;
              &lt;/div&gt;
               &lt;div class="form-group row"&gt;
                &lt;label for="userAboutMe"&gt;Location notes:&lt;/label&gt;
                &lt;textarea class="form-control" id="userAboutMe" rows="3" placeholder="Is there any information about the location that the driver should know?"&gt;&lt;/textarea&gt;
                &lt;div class="form-check"&gt;
                  &lt;input class="form-check-input" type="checkbox" value="" id="defaultCheck1"&gt;
                  &lt;label class="form-check-label" for="defaultCheck1"&gt;
                    Save location notes for this place?
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>