title: Rendering a new Vue component after click
body: <p>I am using <code>Vue-CLI</code>. I have a Vue component which is called <code>viewGenres.vue</code>. This component contains <code>Vuetify</code> table which presents all of the current <code>genres</code> from Vue store. I am trying to add a new option for each genre which is "Edit".</p>
  
  <p>My objective is that for each line in the table there will be an <code>edit</code> button. Once the button is clicked, a new component called <code>editGenre.vue</code> should be rendered. </p>
  
  <p>This component should contain a filled-out form with all the existing details of the specific genre.
  I have several questions:</p>
  
  <p>1) Once I click on the <code>edit</code> button, the following exception appears on browser:</p>
  
  <blockquote>
    <p>ReferenceError: Vue is not defined at VueComponent.editGenre</p>
  </blockquote>
  
  <p>2) In order for me to load the right properties from the DB, I need to define the "ID" prop of the editGenre component. Does anyone have any recommendation on the best method to do so?</p>
  
  <p>This is viewGenres.vue: (the method editGenre is the one responsible for rendering the new component).</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="root" ref="container"&gt;
          &lt;h2&gt;Genres Info&lt;/h2&gt;
          &lt;br&gt;
          &lt;v-data-table
              :headers="headers"
              :items="genres"
              hide-actions
              class="elevation-1"&gt;
              &lt;template slot="items" slot-scope="props"&gt;
                  &lt;td class="text-xs-left"&gt;{{ props.item.id }}&lt;/td&gt;
                  &lt;td class="text-xs-left"&gt;{{ props.item.name }}&lt;/td&gt;
                  &lt;td class="text-xs-left"&gt;{{ props.item.desc }}&lt;/td&gt;
                  &lt;td class="text-xs-left"&gt;{{ props.item.artists }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;&lt;v-btn flat @click="editGenre(props.item.id)"&gt;EDIT&lt;/v-btn&gt;&lt;/td&gt;
                  &lt;td class="text-xs-left"&gt;&lt;v-btn flat @click="deleteGenre(props.item.id)"&gt;Delete&lt;/v-btn&gt;&lt;/td&gt;
              &lt;/template&gt;
          &lt;/v-data-table&gt; 
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import editGenre from '@/components/administratorView/Genres/editGenre.vue'
  const firebase = require('../../../firebaseConfig.js')
  
  export default {
      data: function(){
          return{
              headers: [
              { text: 'ID', value: 'id'},
              { text: 'Name', value: 'name'},
              { text: 'Description', value: 'desc'},
              { text: 'Artists', value: 'artists'},
        { text: 'Edit Genre'},
              { text: 'Delete From DB'}
              ]
          }
      },
      computed: {
      genres: function(){
        return this.$store.state.genre.genres
      }
      },
    components: {
      editGenre
    },
      methods: {
      editGenre: function(id){
        var ComponentClass = Vue.extend(editGenre)
        var instance = new ComponentClass()
        instance.$mount()
        this.$refs.container.appendChild(instance.$el)
      },
          deleteGenre: function(id){
              console.log("Trying to delete " +id)
              firebase.firestore.collection("genres").doc(id).delete().then(()=&gt;{
              this.$store.dispatch('genre/getGenresFromDB')
                  alert("Deleted Document Successfully")
              }).catch(function(error){
                  alert(error)
              })
          }
      },
    mounted(){
      this.$store.dispatch('genre/getGenresFromDB')
    }
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>This is editGenre.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-dialog v-model="editGenre" persistent max-width="500px"&gt;
          &lt;v-card&gt;
              &lt;v-card-title&gt;
                  &lt;h2&gt;Edit Genre {{genre.name}}&lt;/h2&gt;
              &lt;/v-card-title&gt;
              &lt;v-card-text&gt;
                  &lt;v-text-field
                          v-model="name"
                          label="Name"
                          :error-messages="nameErrors"
                          @touch="$v.name.$touch()"
                          @blur="$v.name.$touch()"
                  /&gt;
                  &lt;v-textarea
                          v-model="desc"
                          label="Description"
                          box
                  /&gt;
                  &lt;v-combobox
                      v-model="artists"
                      label="Artists"
                      :items="artistNames"
                      :error-messages="artistsErrors"
                      @touch="$v.artists.$touch()"
                      @blur="$v.artists.$touch()"
                      multiple&gt;
                  &lt;/v-combobox&gt;
                  &lt;v-btn
                          color="primary"
                          @click="submit"&gt;
                          Submit
                  &lt;/v-btn&gt;
                  &lt;v-btn
                      color="primary"
                      @click="close"&gt;
                      Close
                  &lt;/v-btn&gt;
              &lt;/v-card-text&gt;          
          &lt;/v-card&gt;   
      &lt;/v-dialog&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { required } from 'vuelidate/lib/validators'
  const firebase = require('../../../firebaseConfig')
  
  export default{
      data: function(){
          return{
              name: '',
              desc: '',
              artists: []
          }
      },
      props: {
          id: String
      },
      mounted: function(){
          let docRef = firebase.firestore.collection("genres").doc(this.id)
          docRef.get().then(function(doc){
              if(doc.exists){
                  this.name = doc.data().name
                  this.desc = doc.data().desc
                  this.artists = doc.data().artists
              }
              else{
                  console.error("Doc Doesn't Exist!")
              }
          }).catch(function(error){
              console.error(error)
          })
      }
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Thank You!
  Tom</p>